【原】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的。如下图:

时间: 2024-08-05 15:20:42

【原】fetch跨域请求附带cookie(credentials)的相关文章

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

javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效. fetch(url, { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: JSON.stringify({ data: options.data }) }) credentials: 'include' 可以是f

ajax跨域请求带cookie

调用网站:a.xxx.com jQuery(document).ready(function () { $.ajax({ type: "get", async: true, url: "http://www.xxx.com/common/Index", //跨域请求的URL dataType: "html", xhrFields: { withCredentials: true }, crossDomain: true, success: fun

跨域请求传递Cookie问题

问题描述 前后端完全分离的项目,前端使用Vue + axios,后端使用SpringMVC,容器为Tomcat. 使用CORS协议解决跨域访问数据限制的问题,但是发现客户端的Ajax请求不会自动带上服务器返回的Cookie:JSESSIONID. 导致每一个Ajax请求在服务端看来都是一个新的请求,都会在服务端创建新的Session(在响应消息头中设置Set-Cookie:JSESSIONID=xxx). 而在项目中使用了Shiro框架,用户认证的信息是放在Session中的,由于客户端不会把J

浏览器跨域请求之credentials

-时间起源- 前段时间,需要弄个简单的网站出来,访问远程的api服务. 我是这么做的.首先是在搭建一个nodejs服务来运行前端页面.在我请求登录的时候,能成功返回相应的成功信息.然后,当我再次请求读取别的接口的时候,返回的信息确实提示我尚未登录.此时此刻,我一脸蒙逼.明明我已经登陆了啊.后来偶然得知这是因为浏览器的机制问题. -初步解决- 大概的意思是,默认情况下,标准的跨域请求是不会发送cookie等用户认证凭据的.所以,当你再次访问远程api的时候,cookie是不会被带上的,于是乎,服务

Ajax跨域请求,无法传递及接收cookie信息

最近在做一个系统遇到一个问题,在网上找个一个和我遇到相同问题的(原文地址:https://www.cnblogs.com/helloyy/p/6109665.html)按照他的步骤还是没有解决,继续查找资料,根据他的方法做出修改,最后解决.(不想写字就自己拿过来了..) 应用场景: 项目测试环境:前端应用HTML,js,jQuery ajax请求,部署在Apache服务器:后端业务系统应用spring mvc,mybatis,部署在tomcat服务器.当在一个系统需要调用另一个系统的时候,就会出

前端Jquery-Ajax跨域请求,并携带cookie

目录 1. 需现在服务端允许跨域,允许携带cookie 2. 前端Ajax跨域请求代码 1. 需现在服务端允许跨域,允许携带cookie 因服务端脚本语言不同,自行搜索设置 2. 前端Ajax跨域请求代码 $.ajax({ type: "POST", url: "http://127.0.0.1:8000/api/login", data: JSON.stringify({'num': 1}), dataType: 'json', xhrFields: { with

vue开发之跨域请求,请求头not allowed by Access-Control-Allow-Headers,后端cookie session值取不到(二)

原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调用: 特点:是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法,参数给服务端,然后服务端返回数据时会将这个callback 参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了. 缺点:它只支持GET请求而不支

fetch跨域问题

fetch(url,{ method:'post', mode:"cors", //允许跨域 no-cors不允许跨域 // credentials:"include", //跨域请求时是不带cookie的,添加该属性表示强制加入凭据头,请求时就会携带cookie.但是如果加上这个属性,那么服务器的Access-Control-Allow-Origin 就不能是'*',否则会报下面的错误. headers:new Headers({ 'Content-Type':

XMLHttpRequest的跨域请求

缘起 由于浏览器的同源策略,非同源不可请求. 但是,在实践当中,经常会出现需要跨域请求资源的情况,比较典型的例如某个子域名向负责进行用户验证的子域名请求用户信息等应用. 以前要实现跨域访问,可以通过JSONP.Flash或者服务器中转的方式来实现,但是现在我们有了CORS. CORS与JSONP相比,无疑更为先进.方便和可靠. 1 2 3 1. JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求. 2. 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得