React 解决fetch跨域请求时session失效

逆秩装饰
• 阅读 3018

在解决fetch跨域请求接口的时候,一般都是让后台接口在返回头里添加

//允许所有域名的脚本访问该资源
header("Access-Control-Allow-Origin: *");

React 解决fetch跨域请求时session失效

确实这样是可以解决跨域请求的问题,但是如果我们要在请求的时候添加session,那么这样设置就会出现问题了。
fetch添加Cookie验证的方法是设置credentials: 'include'

fetch(url, {
        method: 'POST',
        body: JSON.stringify(params),
        mode: 'cors',
        //请求时添加Cookie
        credentials: 'include',
        headers: new Headers({
            'Accept': 'application/json',
            "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        })
    })

设置好了之后,信心满满的发起请求。却发现网络请求报错了

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

原因是网络请求需要携带Cookie时Access-Control-Allow-Origin是不能设置为*的,这个时候应该要给Access-Control-Allow-Origin指定域名
React 解决fetch跨域请求时session失效

这样就可以达到跨域请求的同时传递Cookie的目的了

  • 列表项目
点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
vue 使用axios 出现跨域请求的两种解决方法
最近在使用vueaxios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案。1:服务器端设置跨域header(“AccessControlAllowOrigin:\”);header(“AccessControlAllowHeaders:contenttype”);header(“AccessCont
科林-Colin 科林-Colin
4年前
Vue跨域解决方法
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No'AccessControlAllowOrigin'headerispresentontherequestedresource.”这种跨域错误。要想本地正常的调试,解决的办法有三个:
Wesley13 Wesley13
3年前
Nginx解决跨域问题(CORS)
前言CORS(CrossOriginResourceSharing)跨域资源共享,是一种允许当前域(domain)的资源(比如html/js/webservice)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(thesameoriginsecuritypolicy)浏览器会禁止这种跨域请求。 如:a.c
Stella981 Stella981
3年前
IE iframe跨域访问cookie丢失解决方法
问题描述:IE浏览器加载Iframe跨域访问后Cookie丢失,用户登录状态失效解决方法:在PHP中加入以下代码即可解决header("AccessControlAllowOrigin:");header("AccessControlAllowCredentials:true");head
Easter79 Easter79
3年前
SpringBoot解决跨域问题
在开发前后端分离的项目时,常常会碰到跨域请求的问题。这是因为浏览器的安全性限制,不允许Ajax访问协议不同、域名不同、端口号不同的数据接口,否则会出报No'AccessControlAllowOrigin'headerispresentontherequestedresource错误。SpringBoot通过设置cors(跨源
Wesley13 Wesley13
3年前
JavaEE从服务器端解决Ajax跨域问题
1、Ajax跨域简介  1、指的是浏览器不能执行其他网站的脚本。是浏览器施加的安全限制。js本身不跨域,使用form表单和iframe直接请求,是不会跨域的;  2、只要两个url的协议、域名、端口其中有一个不同,从其中一个url中使用ajax请求另一个url,则属于Ajax跨域;  3、ajax请求接口,只是不能进入回调函数,接口还是可以正常请
Stella981 Stella981
3年前
SpringBoot实现jsonp跨域通信
实现jsonp跨域通信实现基于jsonp的跨域通信方案原理浏览器对非同源ajax请求有限制,不允许发送跨域请求目前跨域解决方案有两种cros配置jsonp请求cros为新规范,通过一个head请求询问服务器是否允许跨域,若不允许则被拦截jso
Easter79 Easter79
3年前
SpringBoot实现jsonp跨域通信
实现jsonp跨域通信实现基于jsonp的跨域通信方案原理浏览器对非同源ajax请求有限制,不允许发送跨域请求目前跨域解决方案有两种cros配置jsonp请求cros为新规范,通过一个head请求询问服务器是否允许跨域,若不允许则被拦截jso
Stella981 Stella981
3年前
SpringBoot解决跨域问题
在开发前后端分离的项目时,常常会碰到跨域请求的问题。这是因为浏览器的安全性限制,不允许Ajax访问协议不同、域名不同、端口号不同的数据接口,否则会出报No'AccessControlAllowOrigin'headerispresentontherequestedresource错误。SpringBoot通过设置cors(跨源
liam liam
1年前
解决 Axios 跨域阻碍,提高前端接口访问效率
跨域是指访问另外一个域的资源,由于浏览器的同源策略,默认情况下使用XMLHttpRequest和Fetch请求时是不允许跨域的。跨域的根本原因是浏览器的同源策略,这是由浏览器对施加的安全限制。Axios跨域常见报错跨域请求被阻止(CrossOriginRe
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(