之前都有这样一个理解：
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文件， 内容为：

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

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

第二步： 编写请求测试代码

在桌面上新建一个test.html文件，内容为：

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  
    <title>Document</title>
  8.  
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  9.  
    </head>
  10.  
    <body>
  11.  
    <script>
  12.  
    $.ajax({
  13.  
    url: "http://localhost:9000/",
  14.  
    type: 'GET',
  15.  
    success: function(data) {
  16.  
    console.log(data)
  17.  
    },
  18.  
    error: function(err) {
  19.  
    console.error(err)
  20.  
    }
  21.  
    })
  22.  
    </script>
  23.  
    </body>
  24.  
    </html>
  1. 在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起作用了
  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  
    <title>Document</title>
  8.  
    <script src="jquery-2.2.4.min.js"></script>
  9.  
    </head>
  10.  
    <body>
  11.  
    <script>
  12.  
    $.ajax({
  13.  
    url: "http://localhost:9000",
  14.  
    type: 'GET',
  15.  
    xhrFields: {
  16.  
    withCredentials: true // 这里设置了withCredentials
  17.  
    },
  18.  
    success: function(data) {
  19.  
    console.log(data)
  20.  
    },
  21.  
    error: function(err) {
  22.  
    console.error(err)
  23.  
    }
  24.  
    })
  25.  
    </script>
  26.  
    </body>
  27.  
    </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的更多相关文章

  1. Ajax请求携带Cookie

    目录 xhr ajax cookie跨域处理 客户端 服务端 服务端设置跨域的几种方式 方式一 重写addCorsMappings方法 方式二 对单个接口处理 方式三 @CrossOrigin注解 方 ...

  2. 跨域ajax请求携带cookie

    通过withCredentials 方式: getCompanySubject: function () { return axios.get(this.apiUrls.getCompanySubje ...

  3. ajax请求携带cookie和自定义请求头header

    参考链接:https://blog.csdn.net/menghuanzhiming/article/details/102736312

  4. 关于 Angular 跨域请求携带 Cookie 的问题

    在前端开发调试接口的时候都会遇到跨域请求的问题.传统的方式是使用 Nginx 反向代理解决跨域.比如所有接口都在 a.com 的域下,通过 Nginx 将所有请求代理到 a.com 的域下即可. 使用 ...

  5. 关于axios请求携带cookie以及封装

    axios跨域携带cookie需要配置 axios跨域发送请求的时候默认不会带上cookie的 + withCredentials的情况下,后端要设置Access-Control-Allow-Orig ...

  6. 跨域请求携带cookie

      function ajaxPostRequestCipherMachine(url, param) { var url = url; var dict = { 'ret' : false, 'er ...

  7. 怎样实现跨域AJAX请求发送Cookie

    第一步: 服务器必须在Response Header中设置: Access-Control-Allow-Credentials: true 第二步: 客户端发起请求时需要将 xhr.withCrede ...

  8. jquery中$.get()如何让跨域请求携带cookie?

    在这个get请求前面加上这个就好了~~~~

  9. postman发送请求携带Cookie

    相关步骤: 1.下载 Postman-Interceptor_v0.2.24.zip插件 2.解压下载好的插件,将其拖到应用配置中 3.复制Postman-Interceptor_v中的id地址 4. ...

随机推荐

  1. windows 2008 中IIS7.0以上如何设置404错误页面

    404错误页面的设置,不仅仅可以提高用户体验度,从SEO方面考虑,也是非常重要的.今天,笔者在这里介绍一下在windows 2008下如何设置404错误页面. 注意:设置404有我这里介绍2种方式,推 ...

  2. Stack Overflow大揭密：哪一种程序员工资最高？

    Stackoverflow在程序员之间可以說是无人不知无人不晓,甚至常有人开玩笑说:“如果stackoverflow倒闭了,全世界代码的产出率将下降一半以上”或许听起来有点夸张,但是不难想像这个网站在 ...

  3. CorelDRAW简单绘制的一杯满满的橙汁教程

    CorelDRAW怎么画一杯橙汁?方法很简单,首先绘制一个闭合路径,执行线性渐变,填充颜色:复制图形,使用刻刀工具裁剪两半,更改不透明度:然后为橙汁增加底部椭圆:修剪橙子片:绘制吸管:最后加上一层橙子 ...

  4. ZBrush中如何做不同图案的遮罩

    ZBrush®软件中不仅可以创建矩形遮罩还可以创建有图案的遮罩,且是非常简单有效的,那么究竟怎样做出神奇的效果,本文将为您详细讲解. 有关反转遮罩.清除遮罩的详细内容,请点击:ZBrush中如何反选遮 ...

  5. JS怎样写闰年

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 8、Situation-Dependent Combination of Long-Term and Session-Based Preferences in Group Recommendations: An Experimental Analysis ----组推荐中基于长期和会话偏好的情景依赖组合

    一.摘要: 背景:会话组推荐系统的一个主要挑战是如何适当地利用群组成员之间的交互引起用户偏好,这可能会偏离用户的长期偏好.长期偏好和群组诱导的偏好之间的相对重要性应该根据具体的群组设置而变化. 本文: ...

  7. composer install或者update 出错

    composer install或者update  出错Your requirements could not be resolved to an installable set of package ...

  8. HDU3001 Traveling （状压dp+三进制+Tsp问题总结）

    (1)这道题最多可以走两次,所以有0, 1, 2三种状态,所以我们要用三进制 如果要用三进制,就要自己初始化两个数组, 一个是3的n次方,一个是三进制数的第几位的数字是什么 void init() { ...

  9. iText、poi操作word2007（读取，生成）

    关于生成word文件以及插入文字.表格.图片等功能,我使用了poi和itext,因为poi插入图片的jar包我在网上查并不是太完全,也可能我没找到如何使用,所以插入图片我用的是itext iText所 ...

  10. JAVA集合类型（二）

    JAVA集合类型 (现代的变量集群) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0J ...