Ajax請求攜帶Cookie

目錄服務端設定跨域的幾種方式

方式二 對單個介面處理

方式三 @crossorigin註解

方式四 nginx配置新增允許跨域請求

先來了解下xhr

xhr，全稱為xmlhttprequest，用於與伺服器互動資料，是ajax功能實現所依賴的物件，jquery中的ajax就是對 xhr的封裝。

還有axios和fetch請求都屬於xhr請求，都是基於標準 promise 實現。

簡單說說cookie和session的關係

不少朋友搞的不是特別清楚，一知半解的，在這裡闡述下

cookie儲存於客戶端瀏覽器，預設生命週期跟隨瀏覽器，瀏覽器關閉，cookie就會失效，tab標籤也關閉了並不會失效

session儲存於伺服器，比如tomcat，預設失效時間30分鐘，當然也可以通過redis來儲存。

這裡登入做個示例說明

未登入狀態下，匿名使用者通過客戶端瀏覽器請求資料，都是無狀態的（服務端不知道你是誰）

使用者進行請求登入操作，登入成功，服務端會在response header裡加乙個set-cookie寫入瀏覽器中。

之後客戶端在以後的請求中，會自動在請求頭中攜帶此cookie。

cookie有一些屬性，比如

同源情況下，比如是前後端不分離的專案，xhr(ajax)請求沒有任何問題，但是會發現，不支援cookie跨域

非同源情況下，xhr(ajax)請求服務端處理了，但是不會進行響應，會顯示如下錯誤。也就是出現了跨域問題。

所以，解決介面跨域和解決xhr cookie跨域，是不一樣的。

解決cookie跨域需要客戶端和服務端都做處理，主要操作在服務端。

ajax請求新增該引數即可

xhrfields: ,

axios.defaults.withcredentials = true

不需要在header中新增cookie頭，這樣做是沒有任何意義的。比如

headers:

@crossorigin(value = "*", allowcredentials = "true")

@configuration

public class webmvcconfig extends webmvcconfigureradapter 
}

// 需要設定前端請求的url。不支援*

// 設定允許跨域的方法
responses.setheader("access-control-allow-methods", "post, get, options, delete");
// 之後需要設定允許cookie跨域
response.setheader("access-control-allow-credentials", "true");

@crossorigin(value = "*", allowcredentials = "true")

server 

proxy_method get;
proxy_set_header x-real-ip $remote_addr;
proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
proxy_pass  
proxy_set_header host $host;}}

ajax 跨域攜帶COOKIE

背景 專案中用pdf.js外掛程式開啟pdf流文件 這個問題屬於ajax跨域攜帶cookie的問題，找了一篇博文的解決方案。1，原生ajax請求方式 xhr.withcredentials true 支援跨域傳送cookies xhr.send 2，jquery的方法請求 ajax crossdom...

跨域請求攜帶cookie

之前寫過乙個第三方登入的方案，就是利用tomcat session和cookie配合的方式來完成第三方跨域登入。在時間做的過程中碰到了乙個問題，就是在回寫瀏覽器的cookie時發現一直寫不進去，針對這個問題做了仔細的檢查，原來的採用ajax傳送跨域請求的時候預設是不會攜帶cookie的，如果需要允許...

axios請求無法攜帶cookie

背景 最近在用vue重構公司公司angularjs 1.x專案，老專案身份認證採用的cookie，前端ajax庫採用是angularjs的 http resource服務，新版採用的是axios，但是發現前端http響應頭中少了set cookie屬性，同時在瀏覽器中查詢不到cookie資訊,服務端...