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 相关文章推荐
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
Vue实现可移动水平时间轴
Jun 29 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调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python如何删除文件、目录
2020/06/23 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
暑期实习鉴定
2013/12/16 职场文书
九年级家长会邀请函
2014/01/15 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP