【原】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的。如下图:
【原】fetch跨域请求附带cookie(credentials)的更多相关文章
- Ajax跨域请求附带Cookie/Ajax跨域请求附带身份凭证
一.跨域请求中默认不带cookie等验证凭证 尤其对于post请求. 对于ajax请求,其中post,get都可以正常访问. withCredentials: false, // 允许携带cookie ...
- 关于 Angular 跨域请求携带 Cookie 的问题
在前端开发调试接口的时候都会遇到跨域请求的问题.传统的方式是使用 Nginx 反向代理解决跨域.比如所有接口都在 a.com 的域下,通过 Nginx 将所有请求代理到 a.com 的域下即可. 使用 ...
- javascript fetch 跨域请求时 session失效问题
javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效. fetch(url, { method: 'POST', credentials: 'in ...
- C# 跨域 请求带cookie
原文:https://blog.csdn.net/z69183787/article/details/78954325 背景: 别个的项目,要开发App接口,要求用前端AJAX的方式访问接口数据. 后 ...
- 跨域请求携带cookie
function ajaxPostRequestCipherMachine(url, param) { var url = url; var dict = { 'ret' : false, 'er ...
- 【fetch跨域请求】cors
当使用fetch 发起跨域请求时,CORS(跨域资源共享Cross-origin resource sharing) 请求fetch const body = {name:"Good boy ...
- ajax跨域请求带cookie
调用网站:a.xxx.com jQuery(document).ready(function () { $.ajax({ type: "get", async: true, url ...
- 跨域请求传递Cookie问题
问题描述 前后端完全分离的项目,前端使用Vue + axios,后端使用SpringMVC,容器为Tomcat. 使用CORS协议解决跨域访问数据限制的问题,但是发现客户端的Ajax请求不会自动带上服 ...
- vue下axios和fetch跨域请求
1.在config的index.js下面进行常用跨域配置代码:proxyTable: { '/apis': { //使用"/api"来代替"http://xxxx.cn& ...
随机推荐
- jQuery 瀑布流插件: Wookmark
原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网: http://www.wookmark.com/jquery-plugin 翻 ...
- [译] NSScanner:一个陌生的条件判断利器!
NSScanner官方文档 NSScanner类是一个类簇的抽象父类,该类簇为一个从NSString对象扫描值的对象提供了程序接口. NSScanner对象把NSString 对象的的字符解释和转化成 ...
- C++多重继承与虚拟继承
本文只是粗浅讨论一下C++中的多重继承和虚拟继承. 多重继承中的构造函数和析构函数调用次序 我们先来看一下简单的例子: #include <iostream> using namespac ...
- 【Java编程】Java中的大整数计算
在上一篇文章中,我们实现了c语言中的大整数的运算,并且用Miller-Rabin算法实现了对大素数的测试.本来我准备用Java代码实现大整数的运算,查了一下资料发现Java中java.math的Big ...
- LeetCode之“散列表”:Single Number
题目链接 题目要求: Given an array of integers, every element appears twice except for one. Find that single ...
- C语言之可变参实现scanf函数
既然有printf函数可变参实现,那就一定有scanf函数的可变参实现.废话不多说,源码奉上: 本源码不过多分析,如要明白原理,请翻本博客以往的文章看说明. 欢迎关注新浪微博:http://weibo ...
- 恶补web之二:css知识(1)
css指层叠样式表(Cascading Style Sheets) 样式定义如何显示html元素,样式通常存储在样式表里.把样式添加到html4.0中,是为了解决内容与表现分离的问题.外部样式 ...
- sort list(给链表排序)
Sort a linked list in O(n log n) time using constant space complexity. 题目要求使用O(nlogn)时间复杂度,可以考虑使用归并排 ...
- java web--DOM
Dom总结dom:文档对象模型的简称.dom的解析:与XML一样遵循同样的规范 将标记型文档解析成一棵DOM树,并将树中的内容都封装成节点对象. 如果html文档过大,同样会造成解析过慢,怎么使用sa ...
- DBC的故事
1.DBC定义 DBC(data base CAN)是汽车ECU间进行CAN通讯的报文内容,有了它相互之间才能听懂. 2.DBC查看 DBC是文本文件,可以用记事本打开,一般都用CANdb++,可以更 ...