首頁 >web前端 >js教程 >ajax跨域請求怎樣附帶cookie

ajax跨域請求怎樣附帶cookie

坏嘻嘻
坏嘻嘻原創
2018-09-13 17:26:431714瀏覽

這次給大家帶來Ajax跨域訪問時Cookie丟失怎麼解決,解決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了。


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

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 credential 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");

相關推薦:

JavaScript(Ajax)和Cookie的同源策略

Ajax跨域請求不到cookie

#

以上是ajax跨域請求怎樣附帶cookie的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn