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；可是不一样的域，就不行.