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 自动转到命名锚记
Jan 10 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
微信小程序实现图片预览功能
Jan 31 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 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 页面执行时间计算代码
2008/12/04 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
基于JSON数据格式详解
2017/08/31 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python实现Floyd算法
2018/01/03 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Python中包的用法及安装
2020/02/11 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
python3.7调试的实例方法
2020/07/21 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
分享一个python的aes加密代码
2020/12/22 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
Linux文件系统类型
2012/09/16 面试题
幼儿园五一活动方案
2014/02/07 职场文书
化妆品促销方案
2014/02/24 职场文书
学习张林森心得体会
2014/09/10 职场文书
护士求职简历自我评价
2015/03/10 职场文书
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android