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‘ 可以是fetch 带上cookie。但是问题了来。原来在服务器端设置header (php 服务器)
    header("Access-Control-Allow-Origin: *");

会报错:

A wildcard ‘*‘ cannot be used in the ‘Access-Control-Allow-Origin‘ header when the credentials flag is true. Origin ‘http://localhost:8000‘ is therefore not allowed access.

可以看到不允许 使用‘*’ 号了,那么就改成 访问域名(这里是本地调用所以是 http://localhost:8000)

header("Access-Control-Allow-Origin: http://localhost:8000");

改完后再次发送请求,还是报错

Credentials flag is ‘true‘, but the ‘Access-Control-Allow-Credentials‘ header is ‘‘. It must be ‘true‘ to allow credentials. Origin ‘http://localhost:8000‘ is therefore not allowed access.

说‘Access-Control-Allow-Credentials 头必须是true,那么继续增加

header("Access-Control-Allow-Credentials: true");

增加完后可以正常访问了,而且session也有了。

ps: fetch 有个mode 是no-cors ,发现设置后返回的status是0,查资料后

no-cors mode is only to CDN content, such as scripts, CSS and image, you cannot be used for getting data,response.status = 0 is right behavior

no-cors 模式只能用来获取CDN内容,比如脚本,css文件和图片,如果用来获取数据比如json格式就会返回status=0

 
时间: 2024-10-29 19:11:36

javascript fetch 跨域请求时 session失效问题的相关文章

SpringMVC处理跨域请求时的一个注意事项

由于公司对SpingMVC框架里面的东西进行了扩展,在配置SpringMVC时没有使用<mvc:annotation-driven>这个标签.而且是自己手动来配置HandlerMapping和HandlerAdapter.在处理跨域请求时,就抛No adapter for handler 异常了.记录下该异常的解决过程,方便后续查询. 一.异常信息 具体的异常信息如下: threw exception [No adapter for handler [org.springframew[emai

【原】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/目录下有

关于.Net Core 前后端分离跨域请求时 ajax并发请求导致部分无法通过验证解决办法。

项目中有这样一个页面.页面加载的时候会同时并发6个ajax请求去后端请求下拉框. 这样会导致每次都有1~2个"浏览器预请求"不通过. 浏览器为什么会自动发送"预请求"?请看以面连接 https://blog.csdn.net/charleslei/article/details/51906635 那么解决办法无非就是尽量避免发送"预请求". 后来经过反复测试发现"预请求"可以通过设置Access-Control-Max-Age

CORS——跨域请求那些事儿

在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on the requested resource.这样的报错.这样的错误,一般是由于CORS跨域验证机制设置不正确导致的,本文将详细讲解CORS跨域验证机制的原理,让您轻松掌握CORS跨域设置的使用方法,安全.方便的进行前端开发. 什么是CORS CORS(Cross-Origin Resource Sha

JS跨域请求

1. 同源策略 所有的浏览器都遵守同源策略,这个策略能够保证一个源的动态脚本不能读取或操作其他源的http响应和cookie,这就使浏览器隔离了来自不同源的内 容,防止它们互相操作.所谓同源是指协议.域名和端口都一致的情况.举例来说,首先在Nginx上配置两个虚拟主机,一个监听80端口,另一个监听81端 口: server {           listen 80;           server_name localhost;                      location /

一个跨域请求的XSS续

之前讨论过,在解决post跨域请求时,采用iframe+本域代理页的形式,兼容性(当然是包括IE6啦)是最好的.上次提到,代理页面的作用是:执行本域下的回调函数.就是这个原因,给XSS带来了便利.详细说明,请参考一个跨域请求的XSS漏洞 上次也提到,解决这个问题的根本在于杜绝不合法的函数在页面内执行.上次透了一下懒,对函数名就行了包含匹配.过程如下: /** * callback的值为:namespace.function,prefix123456 */ var filter = [ 'name

fetch跨域问题

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

JQuery跨域请求

javascript可跨域请求: <html> <head> <title>通过ajax调用WebService服务</title> <script> var xhr = new ActiveXObject("Microsoft.XMLHTTP"); function sendMsg(){ var name = document.getElementById('name').value; //服务的地址 var wsUrl =

webapi 解决ajax跨域请求问题

webapi在配置文件中加入这几句就可以解决浏览器跨域请求调用的问题?为什么呢? <system.webServer> <validation validateIntegratedModeConfiguration="false" /> <modules runAllManagedModulesForAllRequests="true" /> <httpProtocol> <customHeaders> &