国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡(jiǎn)單設(shè)置，解決使用webpack前后端跨域發(fā)送cookie的問題

wwq0327 / 3145人閱讀

摘要：最近用來做項(xiàng)目，用來做前端自動(dòng)化構(gòu)建。會(huì)在本地搭建一個(gè)服務(wù)器，在和后端調(diào)試的時(shí)候，就會(huì)涉及到跨域的問題。要向后端發(fā)送，前端也需要有相應(yīng)的配置。另外還要將設(shè)為。

最近用vue來做項(xiàng)目，用webpack來做前端自動(dòng)化構(gòu)建。webpack-dev-server會(huì)在本地搭建一個(gè)服務(wù)器，在和后端調(diào)試的時(shí)候，就會(huì)涉及到跨域的問題。

剛開始時(shí)，沒有用vue-cli來構(gòu)建項(xiàng)目，而是參考了github上的vue-vueRouter-webpack來構(gòu)建?？淳W(wǎng)上的資料，vue-cli可以通過配置代理來解決跨域的問題：

proxyTable: {
  "/list": {
    target: "http://api.xxxxxxxx.com",
    changeOrigin: true,
    pathRewrite: {
      "^/list": "/list"
    }
  }
}

具體可以看這篇文章：Vue-cli proxyTable 解決開發(fā)環(huán)境的跨域問題

假如不用代理，那需要怎樣設(shè)置呢？

最簡(jiǎn)單的方法是服務(wù)端將響就頭設(shè)置成Access-Control-Allow-Origin：域名，如果客戶端發(fā)送請(qǐng)求時(shí)，不需要攜帶cookie等信息，可以設(shè)置成Access-Control-Allow-Origin：*，表示任何域都可以向服務(wù)端發(fā)送請(qǐng)求，客戶端不需要任何配置，就可以進(jìn)行跨域調(diào)試了。

但是一般的網(wǎng)站，都需要向后端發(fā)送cookie來進(jìn)行身份驗(yàn)證，此時(shí)，服務(wù)器還需向響應(yīng)頭設(shè)置Access-Control-Allow-Credentials:true，表示跨域時(shí)，允許cookie添加到請(qǐng)求中。設(shè)置Access-Control-Allow-Credentials:true后，要將Access-Control-Allow-Origin指定到具體的域，否則cookie不會(huì)帶到客戶端，例如設(shè)置成Access-Control-Allow-Origin：http://192.168.0.1:8088,http:...是前端服務(wù)器的域名，這就要求用webpack的時(shí)候，要指定具體的域來啟動(dòng)，不要直接用localhost。

要向后端發(fā)送cookie，前端也需要有相應(yīng)的配置。我在項(xiàng)目中，引用了fetch的polyfill,直接用fetch來發(fā)送ajax請(qǐng)求，需要將credentials設(shè)置成include，表示允許跨越傳遞cookie，不要將credentials設(shè)置成same-origin,如果設(shè)置成same-origin，只會(huì)在同源的時(shí)候發(fā)送cookie。另外還要將withCredentials設(shè)為true。

jquery的設(shè)置如下：

xhrFields: {
    withCredentials: true
},
crossDomain: true,

為了勉勵(lì)自己多些總結(jié)，開了個(gè)微信公眾號(hào)(front-end-article)，最近都在用vue做項(xiàng)目，近期應(yīng)該會(huì)寫一些關(guān)于vue的文章。有興趣可以關(guān)注一下哦，或者投稿也可以，多多交流哈：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/87897.html

相關(guān)文章

  • cookie跨域共享 cookie二級(jí)域名共享 前后端分離項(xiàng)目共享cookie

    摘要：例如和，這兩個(gè)域名的二級(jí)域名就是相同的代碼實(shí)現(xiàn)基于添加通過二級(jí)域名共享添加通過二級(jí)域名共享關(guān)閉瀏覽器時(shí)刪除代表關(guān)閉瀏覽器刪除負(fù)數(shù)則關(guān)閉瀏覽器失效沒有刪除參數(shù)介紹需要設(shè)置的二級(jí)域名至少是二級(jí)域名，可以是三級(jí)域名四級(jí)域名設(shè)置可以訪問的路徑。 背景 最近在做sso單點(diǎn)登錄，sso登錄成功后后端需要把token和用戶信息以cookie的方式傳送給前端，由于項(xiàng)目是前后端分離的，這就涉及到了前后端...

    mj 評(píng)論0 收藏0

  • 跨域總結(jié)(jquery,php)

    摘要：引子項(xiàng)目原因，前后端跨域了，第一次涉及到跨域的內(nèi)容，踩了蠻多坑的，總結(jié)一下，避免下次再遇到一圖片發(fā)送請(qǐng)求因?yàn)閳D片是不會(huì)去判斷是否跨域的，但是也只能發(fā)送請(qǐng)求，并且獲取不到返回值，可以用來監(jiān)聽頁面訪問數(shù)量或者廣告點(diǎn)擊數(shù)量二只能用于請(qǐng)求，設(shè)置使用 引子 項(xiàng)目原因，前后端跨域了，第一次涉及到跨域的內(nèi)容，踩了蠻多坑的，總結(jié)一下，避免下次再遇到~ 一、圖片發(fā)送請(qǐng)求 因?yàn)閳D片是不會(huì)去判斷是否跨域的，...

    XboxYan 評(píng)論0 收藏0

  • 跨域總結(jié)(jquery,php)

    摘要：引子項(xiàng)目原因，前后端跨域了，第一次涉及到跨域的內(nèi)容，踩了蠻多坑的，總結(jié)一下，避免下次再遇到一圖片發(fā)送請(qǐng)求因?yàn)閳D片是不會(huì)去判斷是否跨域的，但是也只能發(fā)送請(qǐng)求，并且獲取不到返回值，可以用來監(jiān)聽頁面訪問數(shù)量或者廣告點(diǎn)擊數(shù)量二只能用于請(qǐng)求，設(shè)置使用 引子 項(xiàng)目原因，前后端跨域了，第一次涉及到跨域的內(nèi)容，踩了蠻多坑的，總結(jié)一下，避免下次再遇到~ 一、圖片發(fā)送請(qǐng)求 因?yàn)閳D片是不會(huì)去判斷是否跨域的，...

    dingding199389 評(píng)論0 收藏0

  • 基于 HTTP 請(qǐng)求攔截，快速解決跨域和代理 Mock

    摘要：今天這篇文章，我們會(huì)介紹幾種常見的方法和其中存在的問題，并提出如何基于請(qǐng)求攔截，快速解決跨域和代理問題的方案。因?yàn)闆]有修改該請(qǐng)求，只是延遲發(fā)送，這樣就保持了原請(qǐng)求與業(yè)務(wù)服務(wù)器之間的所有鑒權(quán)等相關(guān)信息，由此解決了跨域訪問無法攜帶的問題。 近幾年，隨著 Web 開發(fā)逐漸成熟，前后端分離的架構(gòu)設(shè)計(jì)越來越被眾多開發(fā)者認(rèn)可，使得前端和后端可以專注各自的職能，降低溝通成本，提高開發(fā)效率。 在前后端...

    dreamGong 評(píng)論0 收藏0

  • javaweb服務(wù)端跨域支持

    摘要：跨域是瀏覽器攔截了服務(wù)器端返回的相應(yīng)，不是攔截了請(qǐng)求。通過來實(shí)現(xiàn)跨域使用來實(shí)現(xiàn)跨域可以解決下不能跨域的問題，僅僅支持請(qǐng)求服務(wù)端多加一個(gè)參數(shù)，在返回?cái)?shù)據(jù)時(shí)用把具體的數(shù)據(jù)包裹起來，傳回前端。 項(xiàng)目開發(fā)為了支持web瀏覽器ajax的直接請(qǐng)求，涉及到了跨域的需求，通過學(xué)習(xí)對(duì)跨域有了更深入的認(rèn)識(shí)，現(xiàn)在總結(jié)一下： 1.跨域說明 跨域指請(qǐng)求和服務(wù)的域不一致，瀏覽器和H5的ajax請(qǐng)求有影響，而對(duì)服務(wù)...

    kycool 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<