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 相关文章推荐
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
js实现随机点名
2021/01/19 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python3基础之list列表实例解析
2014/08/13 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
python实现定时提取实时日志程序
2018/06/22 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
中西医专业毕业生职业规划书
2014/02/24 职场文书
双语教学实施方案
2014/03/23 职场文书
节能环保口号
2014/06/12 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
会计岗位职责范本
2015/04/02 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫