zoukankan      html  css  js  c++  java
  • ajax请求携带 cookie

    总结:

    同源ajax请求是可以自动携带cookie的

    而非同源需要客户端和服务端都做处理:

    1.客户端需要对xhr对象设置withCredentials:true

    2.服务端需要设置响应头 access-control-allow-credentials:true

                  同时必须指明  access-control-allow-origin 为服务方的origin, 不能为*

    ======================================

    之前都有这样一个理解:
    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;但是不同的域,就不行.

  • 相关阅读:
    makefile
    xcode
    centos
    debug
    服务器开发
    socket
    xcode
    调用cpp库更基本
    nodejs cpp动态库
    html5图片裁剪法--
  • 原文地址:https://www.cnblogs.com/eret9616/p/9660782.html
Copyright © 2011-2022 走看看