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 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python中with及contextlib的用法详解
2017/06/08 Python
python文件选择对话框的操作方法
2019/06/27 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
python实现KNN分类算法
2019/10/16 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
浅析Python3 pip换源问题
2020/01/06 Python
python 安装移动复制第三方库操作
2020/07/13 Python
python中的对数log函数表示及用法
2020/12/09 Python
EJB的几种类型
2012/08/15 面试题
生产班组长岗位职责
2014/01/05 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
心得体会的写法
2014/09/05 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
体育教师研修感悟
2015/11/18 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server