ajax跨域請求攜帶cookie

    由於瀏覽器的同源策略的限制，不一樣域名間的請求會形成跨域問題(同源策略是客戶端的限制，服務端的互相請求不會有跨域問題)。通常場景下解決跨域問題經常使用的解決方法都是CORS解決，即配置服務端接受發起請求的域名

response.header('Access-Control-Allow-Origin', '*'); // *表示支持全部的域名，能夠換成具體的域名
複製代碼

    如今ajax的請求能夠獲得返回值了，可是默認跨域請求是不攜帶cookie的，若是碰到一些需求必須從cookie中取值，分兩種狀況

1. 一級域名相同.二級域名不相同，且cookie在一級域名下，能夠設置

document.domain = '一級域名'
複製代碼

就能夠攜帶cookie了。

2.一級域名不一樣，能夠配置XMLHttpRequest.withCredentials 來容許ajax請求時攜帶cookie。

/* jQuery支持跨域攜帶cookie */
$.ajax({
    type:'get',
    crossDomain:true, //設置跨域爲true
    xhrFields: {
        withCredentials: true //默認狀況下，標準的跨域請求是不會發送cookie的
    },
}})
複製代碼

/* 原生ajax支持 */
var xhr = new XMLHttpRequest()
 xhr.open("GET",url,true);
 xhr.withCredentials = true;
 xhr.send(null);
 xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}
複製代碼

/* axios支持 */
axios.defaults.withCredentials = true
複製代碼

    同時服務器server端要配置Access-Control-Allow-Credentials,咱們在客戶端設置了withCredentials=true 參數，對應着服務器端要經過在響應 header 中設置Access-Control-Allow-Credentials = true來運行客戶端攜帶證書式的訪問。經過對Credentials參數的設置，就能夠保持跨域Ajax時傳遞的Cookie。

response.setHeader("Access-Control-Allow-Credentials", "true");
複製代碼

    服務器server端要配置Access-Control-Allow-Origin到以上配置爲止，發送ajax請求，咱們發現還會出現一個錯誤，提示咱們 Access-Control-Allow-Origin 不能用 * 通配符。緣由是：當服務器端 Access-Control-Allow-Credentials = true時，參數Access-Control-Allow-Origin 的值不能爲 '*' 。咱們從新設置Access-Control-Allow-Origin的值，當服務器端接收到請求後，在返回響應時，把請求的域Origin填寫到響應的Header信息裏（即誰訪問我，我容許誰），代碼以下：

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
複製代碼

最後補充一點ajax的post請求Content-Type，但僅能是下列之一

application/x-www-form-urlencoded
    multipart/form-data
    text/plain
複製代碼

否則可能就會報如下的錯誤

XMLHttpRequest cannot load www.mydomain.com/?/ac... No 'Access-Control-Allow-Origin' header is present on the www.mydomain.com/?/ac... requested resource. Origin 'www.mydomain.com' is therefore not allowed access.

最後附上cors請求流程圖

ps:以上內容參考了不少網友的答案，再此表示感謝。