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. STL常用查找算法介绍

    adjacent_find() 在iterator对标识元素范围内,查找一对相邻重复元素,找到则返回指向这对元素的第一个元素的迭代器.否则返回past-the-end. #include <io ...

  2. infiniDB无法建表

    infiniDB无法建表,建表报错为: 最开始报错:Constraint is not supported by InfiniDB. 这是sql语句里面有的约束,infiniDB不支持. 如 CREA ...

  3. Oracle UTL_HTTP（收集汇总有用资料）

    From Oracle The UTL_HTTP package makes Hypertext Transfer Protocol (HTTP) callouts from SQL and PL/S ...

  4. iOS自定义多参数类型方法

    前几天做自定义UIAlertView的时候,想仿造系统自带的初始化方法做一个AlertView,里面涉及到不确定多参数的设置和使用问题.这里做一下记录. 我自定义了一个方法: - (instancet ...

  5. UML类图的简单梳理

    依赖关系 Dependency Class Car{} Class Person{ int a; static int b public void buy(Car c){ int c; .... } ...

  6. GNU C 与 ANSI C的区别

    1.零长度数组 GNU C允许使用零长度数组,定义变长度对象时比较方便 struct var_data { int len; char data[0]; }; var_data的大小仅为一个int型, ...

  7. StickyListHeaders的使用

    我们知道在ios中字母的导航有悬停的效果,在android中,git上有大神实现了这种悬停的功能,我们只要将普通的Listview改为StickyListHeadersListView然后设置adap ...

  8. Github搜索技巧-如何使用github找到自己感兴趣的项目

    Github现在不仅仅作为一个版本控制工具,更是一个开源的仓库,里面不但有优秀的开源代码,电子书,还有一些五花八门的项目,有些国家的法律也放在上面,作为程序员如何找到自己感兴趣的项目就非常重要了! 欢 ...

  9. matlab GUI保存axes（坐标轴）上的图像

    1.默认方式 matlab GUI默认菜单的保存图像默认为保持全部GUI,包括使用" 菜单->编辑->复制图形". 2 保存可见区域 2.1 代码 [FileName, ...

  10. nodejs--（一）http模板篇

    Nodejs http模块可以创建服务器应用实例,也能发送http请求 1.http.get(options[, callback]) 发送简单Get请求,并响应 var http=require(' ...