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. MTK GPIO 一些理解

    基于6575平台: GPIO驱动程序提供了两个接口: (1)内核空间:所提供的GPIO驱动程序,驱动程序可以调用其他函数 (2)用户空间:用户空间的程序可以通过发送IOCTL   /dev/ mtgp ...

  2. Android 内核常见目录的作用

    / :根目录 /bin目录 :命令保存目录,普通用户就可以读取的命令. /boot目录 :启动目录,启动相关文件 /dev :设备文件保存目录 /etc :配置文件保存目录 /home :普通用户的家 ...

  3. 增量会话对象——DeltaSession

    在集群环境中为了使集群中各个节点的会话状态都同步,同步操作是集群重点解决的问题,一般来说有两种同步策略,其一是每次同步都把整个会话对象传给集群中其他节点,其他节点更新整个会话对象:其二是对会话中增量修 ...

  4. Android群英传笔记——第一章：Android体系与系统架构

    Android群英传笔记--第一章:Android体系与系统架构 图片都是摘抄自网络 今天确实挺忙的,不过把第一章的笔记做一下还是可以的,嘿嘿 1.1 Google的生态圈 还是得从Android的起 ...

  5. 结合FireBreath在Chrome/FireFox的多进程模式下崩溃一例

    FireBreath是跨浏览器跨操作系统的插件方案,它封装了ActiveX和NPAPI的插件接口,使用统一的API来暴露JSAPI.Chrome和FireFox使用NPAPI,IE使用ActiveX. ...

  6. 如何让minicom换行

    以前在使用minicom验证裸板代码的时候,经常会遇到以下这个问题: 通常一直打数据往后打就只能打一行,然后就不能换行了,遇到这个问题如何解决? 看到屏幕下方提示:CTRL-A  Z  for hel ...

  7. HBase运维经验

    http://www.qconbeijing.com/download/Nicolas.pdf 重点看了下facebook做了哪些改进以及他们的运维经验,比较重要的有以下几点: 改进: 1 加强了行级 ...

  8. ionic1 下拉刷新 上拉加载 功能

    html页面如下 <ion-content> <ion-refresher pulling-text="刷新" on-refresh="search() ...

  9. xml与object 之间的ORM

    xml映射为object对象,同时object对象,以xml来表示: public class Tools { private static XmlNodeList SelectNodes(strin ...

  10. AI 学习之路

    前言:本文章纯属自己学习路线纪录,不喜勿喷. 最近AI很火,几乎是个程序员 都要去学习AI,作为一个菜鸡小前端,我也踏上了学习AI的方向. 在学习之中,最开始遇到了很多的困难,比如你不知道如何切入进来 ...