ajax请求携带 cookie
之前都有这样一个理解:
ajax请求时是不会自动带上cookie的,要是想让他带上的话,必须哟啊设置withCredential为true。
这个说法会让人产生完全扭曲的误解,我就是其中之一。
完整的无歧义的表述应该是这样:
1.ajax会自动带上同源的cookie,不会带上不同源的cookie
2. 可以通过前端设置withCredentials为true, 后端设置Header的方式让ajax自动带上不同源的cookie,但是这个属性对同源请求没有任何影响。会被自动忽略。
3. 这是MDN对withCredentials的解释:MDN-withCredentials ,我接着解释一下同源。
众所周知,ajax请求是有同源策略的,虽然可以应用CORS等手段来实现跨域,但是这并不是说这样就是“同源”了。ajax在请求时就会因为这个同源的问题而决定是否带上cookie,这样解释应该没有问题了吧,还不知道同源策略的,应该去谷歌一下看看。
实验
第一步: 建立一个本地服务器
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-Credentials
第二步: 编写请求测试代码
在桌面上新建一个test.html文件,内容为:
- <!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;但是不同的域,就不行.
ajax请求携带 cookie的更多相关文章
- Ajax请求携带Cookie
目录 xhr ajax cookie跨域处理 客户端 服务端 服务端设置跨域的几种方式 方式一 重写addCorsMappings方法 方式二 对单个接口处理 方式三 @CrossOrigin注解 方 ...
- 跨域ajax请求携带cookie
通过withCredentials 方式: getCompanySubject: function () { return axios.get(this.apiUrls.getCompanySubje ...
- ajax请求携带cookie和自定义请求头header
参考链接:https://blog.csdn.net/menghuanzhiming/article/details/102736312
- 关于 Angular 跨域请求携带 Cookie 的问题
在前端开发调试接口的时候都会遇到跨域请求的问题.传统的方式是使用 Nginx 反向代理解决跨域.比如所有接口都在 a.com 的域下,通过 Nginx 将所有请求代理到 a.com 的域下即可. 使用 ...
- 关于axios请求携带cookie以及封装
axios跨域携带cookie需要配置 axios跨域发送请求的时候默认不会带上cookie的 + withCredentials的情况下,后端要设置Access-Control-Allow-Orig ...
- 跨域请求携带cookie
function ajaxPostRequestCipherMachine(url, param) { var url = url; var dict = { 'ret' : false, 'er ...
- 怎样实现跨域AJAX请求发送Cookie
第一步: 服务器必须在Response Header中设置: Access-Control-Allow-Credentials: true 第二步: 客户端发起请求时需要将 xhr.withCrede ...
- jquery中$.get()如何让跨域请求携带cookie?
在这个get请求前面加上这个就好了~~~~
- postman发送请求携带Cookie
相关步骤: 1.下载 Postman-Interceptor_v0.2.24.zip插件 2.解压下载好的插件,将其拖到应用配置中 3.复制Postman-Interceptor_v中的id地址 4. ...
随机推荐
- oracle导入导出操作
1,获取oracle导入导出帮助: imp help=y 2,导出命令 exp 用户名/密码@数据库实例 file=文件路径名 如: exp sys/password@orcl file=d:\dat ...
- POJ 2524 Ubiquitous Religions 【并查集】
解题思路:输入总人数 n,和m组数据:即和杭电畅通工程相类似,对这m组数据做合并操作后,求最后一共有多少块区域. #include<stdio.h> int pre[50001]; int ...
- 脑图工具MindNode"附属节点"是什么意思 图解
新手会发现在主节点上无论是按Tab子节点还是按Enter附属节点,都是向右延伸,感觉像没区别? 其实不然,从第二个节点开始,你再按 Tab 或者 Enter 就知道区别了. 废话少说,直接上图. 我觉 ...
- day07 分支,循环
目录 if(分支) if的语法 if...else... if...elif...else if的嵌套 for循环 for-else 语句 for循环的嵌套(重要) range介绍 while循环 w ...
- 03 Winform基础
补充: MD5加密 static void Main(string[] args) { string s = GetMD5("123"); Console.WriteLine(s) ...
- 查看Linux系统信息命令
系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...
- 洛谷 P1134 阶乘问题
一开始只保留最后一位,交上去29 #include<cstdio> #include<cmath> #include<algorithm> #define REP( ...
- 多个 WindowsFormsHost 叠加顺序调整
原文:多个 WindowsFormsHost 叠加顺序调整 工作中遇到多个 WindowsFormsHost 包装的控件叠加顺序的调整问题,用了 BingToFront 和 BringToBack,不 ...
- js获得 json对象的个数(长度)
function getJsonObjLength(jsonObj) { var Length = 0; for (var item in jsonObj) { Length++; } return ...
- MQTT学习
http://blog.csdn.net/mzwhhwj/article/details/77489890