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系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
js实现右键菜单功能
Nov 28 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
Openlayers显示地理位置坐标的方法
Sep 28 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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
深入PHP curl参数的详解
2013/06/17 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
python实现网页链接提取的方法分享
2014/02/25 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
简单实现python进度条脚本
2017/12/18 Python
python如何安装下载后的模块
2020/07/03 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
平面设计的岗位职责
2013/11/08 职场文书
中学门卫岗位职责
2013/12/26 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2014年妇女工作总结
2014/12/06 职场文书
人事主管岗位职责
2015/02/04 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
使用Python获取字典键对应值的方法
2022/04/26 Python