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 相关文章推荐
IFrame跨域高度自适应实现代码
Aug 16 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
vue中axios封装使用的完整教程
Mar 03 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
PDO::query讲解
2019/01/29 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
基于python监控程序是否关闭
2020/01/14 Python
如何在django中实现分页功能
2020/04/22 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
法学毕业生自我鉴定
2014/01/31 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
代理协议书范本
2014/04/22 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
销售助理岗位职责
2015/02/11 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python