在前后端分離的項目中，ajax跨域請求怎樣附帶cookie

在項目的實際開發中，我們總會遇到前后端分離的項目，在這樣的項目中，跨域是第一個要解決的問題，除此之外，保存用戶信息也是很重要的，然而，在后台保存用戶信息通常使用的session和cookie結合的方法，而在前端的實際情況中，跨域產生的ajax是無法攜帶cookie信息的，這樣導致了session和cookie的用戶信息儲存模式受到影響，該怎樣去解決這樣一個問題呢，通過查閱資料，我這里以angularjs的$http中的ajax請求來舉例子。

首先，在后台我使用的servlet的filter攔截所有的請求，並設置請求頭：

// 解決跨越問題  

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,SessionToken");
 

// 允許跨域請求中攜帶cookie
 response.setHeader("Access-Control-Allow-Credentials", "true");

　　

 

代碼的上面部分是解決跨域問題的代碼，而第二部分的response.setHeader("Access-Control-Allow-Credentials", "true");這是允許在后端中允許攜帶cookie的代碼。

 

前端代碼：

$scope.login = function () {
    $http({
        // 設置請求可以攜帶cookie
        withCredentials:true,
        method: 'post',
        params: $scope.user,
        url: 'http://localhost:8080/user/login'
    }).then(function (res) {
        alert(res.data.msg);
    }, function (res) {
        if (res.data.msg) {
            alert(res.data.msg);
        } else {
            alert('網絡或設置錯誤');
        }
    })
}

　　

 

從以上代碼，我們不難知道，在跨域請求中在前端最重要的一點在於withCredentials:true，這一語句結合后台設置的"Access-Control-Allow-Credentials", "true"就可以在跨域的ajax請求中攜帶cookie了。

pixabayhttps://www.wode007.com/sites/73237.html wallhavenhttps://www.wode007.com/sites/73236.html

然而，在我測試的時候發現了一些問題，當請求發出時，瀏覽器就報錯如下

Response to preflight request doesn't pass access control check: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'null' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

 

通過查閱相關資料，這才發現，原因是在后台解決跨域代碼的response.setHeader("Access-Control-Allow-Origin", "*");這部分和設置跨域攜帶cookie部分產生了沖突，在查閱相關資料我發現設置跨域ajax請求攜帶cookie的情況下，必須指定Access-Control-Allow-Origin，意思就是它的值不能為*，然而想到前后端分離的情況下前端ip是變化的，感覺又回到了原點，難道就不能用這個方法來解決ajax跨域並攜帶cookie這個難題？

 

接下來，在對我發出的ajax請求的研究中，我發現，在angularjs中，每一個請求中的Origin請求頭的值都為"null"，這意味着什么？於是我把后台"Access-Control-Allow-Origin", "*"改成了"Access-Control-Allow-Origin", "null"，接下來的事情就變得美好了，所有的ajax請求能成功的附帶cookie，成功的達到了目的。

response.setHeader("Access-Control-Allow-Origin", "null");