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 相关文章推荐
jQuery的三种$()
Dec 30 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
使用JS实现动态时钟
Mar 12 Javascript
vue中template的三种写法示例
Oct 21 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数组去重比较快的实现方式
2016/01/19 PHP
php实用代码片段整理
2016/11/12 PHP
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
7个JS基础知识总结
2014/03/05 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
js密码强度检测
2016/01/07 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
浅谈python标准库--functools.partial
2019/03/13 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
python 用struct模块解决黏包问题
2020/11/07 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
cf战队收人广告词
2014/03/14 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
行政复议决定书
2015/06/24 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书