簡單設置，解決使用webpack前后端跨域發送cookie的問題

wwq0327 發布于2019-08-21 14:25 / 3134人閱讀

摘要：最近用來做項目，用來做前端自動化構建。會在本地搭建一個服務器，在和后端調試的時候，就會涉及到跨域的問題。要向后端發送，前端也需要有相應的配置。另外還要將設為。

最近用vue來做項目，用webpack來做前端自動化構建。webpack-dev-server會在本地搭建一個服務器，在和后端調試的時候，就會涉及到跨域的問題。

剛開始時，沒有用vue-cli來構建項目，而是參考了github上的vue-vueRouter-webpack來構建。看網上的資料，vue-cli可以通過配置代理來解決跨域的問題：

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

具體可以看這篇文章：Vue-cli proxyTable 解決開發環境的跨域問題

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

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

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

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

jquery的設置如下：

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

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

GPU云服務器云服務器端跨域 cookie的使用跨域cookie java跨域cookie共享

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87897.html

cookie跨域共享 cookie二級域名共享前后端分離項目共享cookie

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

mj 2019-08-19 10:48 評論0 收藏0
跨域總結(jquery,php)

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

XboxYan 2019-08-22 15:05 評論0 收藏0
跨域總結(jquery,php)

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

dingding199389 2019-06-28 18:29 評論0 收藏0
基于 HTTP 請求攔截，快速解決跨域和代理 Mock

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

dreamGong 2019-08-26 13:36 評論0 收藏0
javaweb服務端跨域支持

摘要：跨域是瀏覽器攔截了服務器端返回的相應，不是攔截了請求。通過來實現跨域使用來實現跨域可以解決下不能跨域的問題，僅僅支持請求服務端多加一個參數，在返回數據時用把具體的數據包裹起來，傳回前端。項目開發為了支持web瀏覽器ajax的直接請求，涉及到了跨域的需求，通過學習對跨域有了更深入的認識，現在總結一下： 1.跨域說明跨域指請求和服務的域不一致，瀏覽器和H5的ajax請求有影響，而對服務...

kycool 2019-08-20 17:41 評論0 收藏0