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的目的了

• 列表项目

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。