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 window.setTimeout() 的详细用法
Nov 04 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 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的一个登录的类 [推荐]
2007/03/16 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
python实现划词翻译
2020/04/23 Python
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
基于python实现查询ip地址来源
2020/06/02 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL