React如何解决fetch跨域请求时session失效问题


Posted in Javascript onNovember 02, 2018

前言

fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性。

Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能;除此之外,Fetch 还利用到了请求的异步特性——它是基于 Promise 的。

请注意,fetch 规范与 jQuery.ajax() 主要有两种方式的不同,牢记:

  • 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ), 仅当网络故障时或请求被阻止时,才会标记为 reject。
  • 默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项).

发现问题

在解决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的目的了

  • 列表项目

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
自己的js工具_Form 封装
Aug 21 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
element ui table 增加筛选的方法示例
Nov 02 #Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 #Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 #Javascript
如何使用vuex实现兄弟组件通信
Nov 02 #Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 #Javascript
vue头部导航动态点击处理方法
Nov 02 #Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 #Javascript
You might like
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
使用PHP开发留言板功能
2019/11/19 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
对vue里函数的调用顺序介绍
2018/03/17 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python 加密与解密小结
2018/12/06 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
Linux操作面试题
2012/05/16 面试题
上班离岗检讨书
2014/01/27 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers