• 【原】fetch跨域请求附带cookie(credentials)


    HTTP访问控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

    解决跨域的方式有很多种,本文介绍“跨域请求附带发送cookie”

    一、测试环境

    前提:后台使用apache+php实现。apache设置多个虚拟主机,设置方式参考:http://www.cnblogs.com/sivkun/p/7347978.html

    http://a.sivkun.com域中/cors-cookie/目录下有文件:

    1. index.php

    <?php 
    session_start();
    setcookie('a.a','a.a');
    setcookie('a.sivkun','a.sivkun',time()+3600*24,'/',"a.sivkun.com");
    include_once 'index.html';
    ?>

    2. index.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <title></title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
      <script>
        fetch('http://b.sivkun.com/cors-cookie/api.php', {
          credentials: "include" //表示发送请求附带域b.sivkun.com下cookie
        }).then(function (response) {
          console.log(response);
          return response.json();
        }).then(function (data) {
          console.log('cookie',data)
        })
      </script>
    </body>
    
    </html>

    http://b.sivkun.com域中/cors-cookie/目录下有文件:

    1. api.php(有问题的代码)

    <?php
    session_start();setcookie("bbbbb","bbbbb");
    setcookie('b.sivkun','b.sivkun',time()+3600*24,'/',"b.sivkun.com");
    echo json_encode($_COOKIE);
    ?>

    正确的方式

    1. api.php(修正后的代码)

    <?php
    session_start();
    header("Access-Control-Allow-Origin:http://a.sivkun.com");
    header("Access-Control-Allow-Credentials: true");
    setcookie("bbbbb","bbbbb");
    setcookie('b.sivkun','b.sivkun',time()+3600*24,'/',"b.sivkun.com");
    echo json_encode($_COOKIE);
    ?>

    接下来是一步步的解决过程,不想看可以不看。

    二、开启附带cookie跨域

    上面的代码运行是有问题的

    报错:

    1.这里要求http://b.sivkun.com/cors-cookie/api.php.设置header。

    index.php:1 Fetch API cannot load http://b.sivkun.com/cors-cookie/api.php.
    No 'Access-Control-Allow-Origin' header is present on the requested resource.
    Origin 'http://a.sivkun.com' is therefore not allowed access.
    If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

     修改:api.php,添加`Access-Control-Allow-Origin:*`头,允许所有跨域请求

    <?php
     session_start();
     header("Access-Control-Allow-Origin:*");
     setcookie("bbbbb","bbbbb");
     setcookie('b.sivkun','b.sivkun',time()+3600*24,'/',"b.sivkun.com");
     echo json_encode($_COOKIE);
    ?>

    2.这里提示如果请求使用“include”证书模式,需要把`*`改为http://a.sivkun.com。

    Fetch API cannot load http://b.sivkun.com/cors-cookie/api.php. 
    The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
    Origin 'http://a.sivkun.com' is therefore not allowed access.

    修改:api.php

    <?php
    session_start();
    header("Access-Control-Allow-Origin:http://a.sivkun.com");
    setcookie("bbbbb","bbbbb");
    setcookie('b.sivkun','b.sivkun',time()+3600*24,'/',"b.sivkun.com");
    echo json_encode($_COOKIE);
    ?>

    3.接下来报错,说要添加`Access-Control-Allow-Credentials`头部,加上呗

    Fetch API cannot load http://b.sivkun.com/cors-cookie/api.php. 
    The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
    Origin 'http://a.sivkun.com' is therefore not allowed access.

    api.php

    <?php
    session_start();
    header("Access-Control-Allow-Origin:http://a.sivkun.com");
    header("Access-Control-Allow-Credentials: true");
    setcookie("bbbbb","bbbbb");
    setcookie('b.sivkun','b.sivkun',time()+3600*24,'/',"b.sivkun.com");
    echo json_encode($_COOKIE);
    ?>

    控制太输出:说明cookie是发过去了的。

    最后看一下应用的cookie信息:Cookies选项中,在`a.sivkun.com`中可以看到包括`b.sivkun.com`所有的cookie信息。

     接下来在控制台操作一下cookie,发现只有a.sivkun.com这个域中设置的cookie,说明浏览器限制javascript是不可以跨域操作cookie的。如下图:

  • 相关阅读:
    ls-remote -h -t git://github.com/adobe-webplatform/eve.git
    vue学习(四)登陆、注册、首页模板页区分
    Asp.Net Api+Swagger控制器注释
    vue学习(三)完善模板页(bootstrap+AdminLTE)
    vue学习(二)模板页配置(bootstrap)
    vue学习(一)项目搭建
    react-native当使用antd-mobile出现View config not found for name div
    部署上次的Hapi到Windows+Docker,WindowsDocker
    Hapi+MySql项目实战自动化文档生成(四)
    Android DialogFragment 遇到 java.lang.IllegalStateException: Fragment already added: 的解决方法
  • 原文地址:https://www.cnblogs.com/sivkun/p/7348523.html
Copyright © 2020-2023  润新知