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的。如下图：

【原】fetch跨域请求附带cookie（credentials）的更多相关文章

  1. Ajax跨域请求附带Cookie/Ajax跨域请求附带身份凭证

    一.跨域请求中默认不带cookie等验证凭证 尤其对于post请求. 对于ajax请求,其中post,get都可以正常访问. withCredentials: false, // 允许携带cookie ...

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

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

  3. javascript fetch 跨域请求时 session失效问题

    javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效. fetch(url, { method: 'POST', credentials: 'in ...

  4. C# 跨域 请求带cookie

    原文:https://blog.csdn.net/z69183787/article/details/78954325 背景: 别个的项目,要开发App接口,要求用前端AJAX的方式访问接口数据. 后 ...

  5. 跨域请求携带cookie

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

  6. 【fetch跨域请求】cors

    当使用fetch 发起跨域请求时,CORS(跨域资源共享Cross-origin resource sharing) 请求fetch const body = {name:"Good boy ...

  7. ajax跨域请求带cookie

    调用网站:a.xxx.com jQuery(document).ready(function () { $.ajax({ type: "get", async: true, url ...

  8. 跨域请求传递Cookie问题

    问题描述 前后端完全分离的项目,前端使用Vue + axios,后端使用SpringMVC,容器为Tomcat. 使用CORS协议解决跨域访问数据限制的问题,但是发现客户端的Ajax请求不会自动带上服 ...

  9. vue下axios和fetch跨域请求

    1.在config的index.js下面进行常用跨域配置代码:proxyTable: { '/apis': { //使用"/api"来代替"http://xxxx.cn& ...

随机推荐

  1. 03_TortoiseGit冲突和补丁演示，补丁冲突

     1 下载TortoiseGit,下载地址: http://tortoisegit.soft32.com/free-download/ 2 创建一个GIT仓库 3 创建克隆,创建两个用于克隆的仓库 ...

  2. .NET(C#)连接各类数据库代码-集锦

    1.C#连接连接Access 复制代码代码如下: using System.Data;   using System.Data.OleDb;   ..   string strConnection=& ...

  3. 【61】git项目实战的步骤总结

    1.新建分支的步骤 git pull git checkout -b 分支号(task的后面的代号) 2.提交代码到远程仓库的步骤 git add . git commit -m "分支号+ ...

  4. tomcat会话之持久化会话管理器

    前面提到的标准会话管理器已经提供了基础的会话管理功能,但在持久化方面做得还是不够,或者说在某些情景下无法满足要求,例如把会话以文件或数据库形式存储到存储介质中,这些都是标准会话管理器无法做到的,于是另 ...

  5. 【一天一道LeetCode】#12 Integer to Roman

    一天一道LeetCode系列 (一)题目 Given an integer, convert it to a roman numeral. Input is guaranteed to be with ...

  6. Android编译系统中的Kconfig，Makefile,.config编译系统浅析

    在对Android进行编译时,用的就是Linux下的Makefile和Kconfig编译系统,对整个系统进行编译.当然还包括很多配置命令,比如make defconfig, make oldconfi ...

  7. objective-c中关于类型编码的解释

    在某些情况下,我们需要动态的向一个类插入一个实例方法(也可以是一个类方法):这时我们可以用class_addMethod函数来完成: BOOL class_addMethod ( Class cls, ...

  8. How to download the installation package by ZOL Downer

    How to download the installation package by ZOL Downer Ma Genfeng (Guangdong Unitoll Services incorp ...

  9. C# 设置Word文档保护（加密、解密、权限设置）

    对于一些重要的word文档,出于防止资料被他人查看,或者防止文档被修改的目的,我们在选择文档保护时可以选择文档打开添加密码或者设置文档操作权限等,在下面的文章中将介绍如何使用类库Free Spire. ...

  10. 从零开始搭建基于CEFGlue的CB/S的winform项目

    基于CEF,用.net包装过的Xilium.CefGlue/3,基于此框架可以很方便在你的winform等C/S项目中搭建一个内建的浏览器 Chromium Embedded Framework (C ...