ajax請求攜帶 cookie

時間 2019-11-20

標籤 ajax 請求攜帶 cookie 欄目 Ajax 简体版

原文原文鏈接

以前都有這樣一個理解：
ajax請求時是不會自動帶上cookie的，要是想讓他帶上的話，必須喲啊設置withCredential爲true。
這個說法會讓人產生徹底扭曲的誤解，我就是其中之一。
完整的無歧義的表述應該是這樣：
1.ajax會自動帶上同源的cookie，不會帶上不一樣源的cookie
2. 能夠經過前端設置withCredentials爲true，後端設置Header的方式讓ajax自動帶上不一樣源的cookie，可是這個屬性對同源請求沒有任何影響。會被自動忽略。
3. 這是MDN對withCredentials的解釋： MDN-withCredentials ，我接着解釋一下同源。
衆所周知，ajax請求是有同源策略的，雖然能夠應用CORS等手段來實現跨域，可是這並非說這樣就是「同源」了。ajax在請求時就會由於這個同源的問題而決定是否帶上cookie，這樣解釋應該沒有問題了吧，還不知道同源策略的，應該去谷歌一下看看。php

實驗
第一步：創建一個本地服務器html

1.新建一個demo文件夾，進入文件夾，用php -S localhost:9000開啓一個本地服務器
2.在demo文件夾下新建一個index.php文件，內容爲：前端

<?php
header( "Access-Control-Allow-Origin: http://localhost:9999");
header( 'Access-Control-Allow-Credentials:true');
$value = "something with cookie";
setcookie( "testcookie", $value, time() + 3600);
echo "cookie has seted";

注意： Access-Control-Allow-Origin必須制定特定的URL，不能是*，且須要加上Access-Control-Allow-Credentialsjquery

第二步：編寫請求測試代碼web

在桌面上新建一個test.html文件，內容爲：ajax

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "http://localhost:9000/",
type: 'GET',
success: function(data) {
console.log(data)
},
error: function(err) {
console.error(err)
}
})
</script>
</body>
</html>

在desktop目錄下起一個服務器，用php -S localhost:9999開啓一個本地服務器
第三步：測試
1.在瀏覽器中訪問localhost:9999/test.html，打開調試工具->application->cookie能夠看到cookie設置成功。
2.打開調試工具->netwoek，刷新一下，能夠看到一個localhost請求，檢查這個localhost請求的Request Headers，發現沒有cookie這個頭部，說明不一樣源的請求時不會帶上cookie的（即便有CORS）
3.把test.html放到demo文件夾下，在訪問localhost:9000/test.html，查看Request Headers，會發現cookie頭部，說明同源請求自動帶上了cookie
4.把test.html的內容更改成如下內容，請求時會有cookie頭部。說明withCredentials起做用了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-2.2.4.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "http://localhost:9000",
type: 'GET',
xhrFields: {
withCredentials: true // 這裏設置了withCredentials
},
success: function(data) {
console.log(data)
},
error: function(err) {
console.error(err)
}
})
</script>
</body>
</html>

參考：https://zhuanlan.zhihu.com/p/28818954
https://www.zhihu.com/question/25427931
同源策略
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
https://stackoverflow.com/questions/2870371/why-is-jquerys-ajax-method-not-sending-my-session-cookie
服務器也能夠在設置Cookie的時候，指定Cookie的所屬域名爲一級域名，好比.example.com。後端

Set-Cookie: key=value; domain=.example.com; path=/
這樣的話，二級域名和三級域名不用作任何設置，均可以讀取這個Cookie。跨域

同源策略是瀏覽器最核心也最基本的安全功能首先：web是開放的世界, 須要互聯連接. 你的網站, 可使用別人的圖片, img, 使用別人 script 作統計, 作廣告聯盟瀏覽器

假設沒有同源, 互聯網世界是什麼樣?連接跳轉致使的問題. http://a.com , 放一個連接到 icbc.com, 而後 window.open來打開, 獲取窗口句柄, 而後能夠擁有對這個頁面徹底的控制權. 攔截表單，捕獲數據，將帳號密碼上傳到a.com.ajax請求, 要啥就有啥. 你登陸jd.com; 而後打開a.com, 經過ajax 請求http://jd.com 的用戶信息接口, 這時候由於訪問的jd.com,因此瀏覽器自動帶上了jd的cookie,而後獲取到你的訂單list ,暱稱, 全部私密信息.因此,須要要同源策略安全

在同一個域內，客戶端腳本能夠任意讀寫同源內的資源，dom,cookie；可是不一樣的域，就不行.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。