成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wwq0327 / 3143人閱讀

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

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

剛開始時，沒有用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è)置呢？

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

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

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

jquery的設(shè)置如下：

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87897.html

相關(guān)文章

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

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

    mj 評論0 收藏0

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

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

    XboxYan 評論0 收藏0

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

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

    dingding199389 評論0 收藏0

  • 基于 HTTP 請求攔截，快速解決跨域和代理 Mock

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

    dreamGong 評論0 收藏0

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

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

    kycool 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<