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 相关文章推荐
javascript 必知必会之closure
Sep 21 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
微信小程序反编译的实现
Dec 10 Javascript
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执行速度全攻略(上)
2006/10/09 PHP
PHP脚本数据库功能详解(中)
2006/10/09 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
php封装一个异常的处理类
2017/06/08 PHP
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python处理session的方法整理
2019/08/29 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
别名指示符是什么
2012/10/08 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
欢迎领导标语
2014/06/27 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
党员活动总结
2015/02/04 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
2016中秋节问候语
2015/11/11 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
python实现简单石头剪刀布游戏
2021/10/24 Python
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
Linux中各个目录的作用与内容
2022/06/28 Servers