没有合适的资源?快使用搜索试试~ 我知道了~
React如何解决fetch跨域请求时session失效问题
1 下载量 81 浏览量
2021-01-19
18:23:21
上传
评论
收藏 79KB PDF 举报
温馨提示
试读
2页
前言 fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性。 Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能;除此之外,Fetch 还利用到了请求的异步特性——它是基于 Promise 的。 请注意,fetch 规范与 jQuery.ajax() 主要有两种方式的不同,牢记: 当
资源详情
资源评论
资源推荐
React如何解决如何解决fetch跨域请求时跨域请求时session失效问题失效问题
前言前言
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: *");
确实这样是可以解决跨域请求的问题,但是如果我们要在请求的时候添加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指定域名
这样就可以达到跨域请求的同时传递Cookie的目的了
列表项目
总结总结
weixin_38700409
- 粉丝: 5
- 资源: 955
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0