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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
vue使用openlayers实现移动点动画
Sep 24 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生成器简单实例
2015/05/13 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
详解Python中类的定义与使用
2017/04/11 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
学前教育专业毕业生自荐信
2013/10/03 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
师范毕业生个人求职信
2013/12/09 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
小学节能减排倡议书
2014/05/15 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
九一八事变演讲稿
2014/09/05 职场文书
庆六一宣传标语
2014/10/08 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle