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. 图形绘制中的PorterDuffXfermode

    1.概述 在android图形渲染中 会使用到图像混合模式 <span style="font-size:18px;">setXfermode(Xfermode xfe ...

  2. RB-tree （红黑树）相关问题

    今天被问到了红黑树的规则,简述总结一下: 1.每个节点不是红色就是黑色. 2.根节点为黑色. 3.如果节点为红,其子节点必须为黑. 4.任一节点至NULL(树尾端)的任何路径,所含之黑节点数必须相同. ...

  3. Java学习笔记（一）网格袋布局

    网格袋布局类似于Win8的Metro布局,用于将组件按大小比例放在不同位置的网格内,各组件的实际大小会随着窗口的改变而改变,但相对位置不变,能够很好的适应屏幕. 通过阅读<21天学通Java&g ...

  4. 关于C++“加、减机制”的整理

    今天上C++的课,杨老师提到C++继承是“加机制”的,而没有像人类进化一样采取的是“减机制”,这样会导致代码的膨胀和冗余.回来后,特地查阅了一下资料,发现这方面的文章很少. 下边的资料摘自网上及杨老师 ...

  5. C/C++内存布局及对齐

    1.源文件转换为可执行文件 源文件经过以下几步生成可执行文件: 1.预处理(preprocessor):对#include.#define.#ifdef/#endif.#ifndef/#endif等进 ...

  6. Apriori和FPTree

    Apriori算法和FPTree算法都是数据挖掘中的关联规则挖掘算法,处理的都是最简单的单层单维布尔关联规则. Apriori算法 Apriori算法是一种最有影响的挖掘布尔关联规则频繁项集的算法.是 ...

  7. 基于Bresenham和DDA算法画线段

    直线:y=kx+b 为了将他在显示屏上显示出来,我们需要为相应的点赋值,那么考虑到计算机的乘法执行效率,我们肯定不会选择用Y=kx+b这个表达式求值,然后进行画线段. 我们应当是将它转化为加法运算. ...

  8. 坚持自己的追求，迎来 “中国系统开发网” （CSDN）的专访

    坚持自己的追求,迎来 "中国系统开发网" (CSDN)的专访: 专访马根峰:海量数据处理与分析大师的中国本土程序员" http://www.csdn.net/articl ...

  9. iOS中tableView组头部或尾部标题的设置

    解决在tableView返回组标题直接返回字符串,带来的不便设置组标题样式的问题解决办法,设置尾部标题和此类似  // 返回组头部view的高度 - (CGFloat)tableView:(UITab ...

  10. Flask-email 发送邮件的配置，发送附件的方法，以及os.environ.get('MAIL_USERNAME')为None的解决办法

    一.发送邮件的配置 在学习flask-mail来发送电子邮件的时候遇到了一些问题,其实都是些小问题,现在记录下来以便于以后查看. 1.首先flask-mail的安装 pip install flask ...