如何解决跨域请求反应时的会话失效问题

前言

Fetch相当于reactjs中的XMLHttpRequest，它提供了许多类似于XMLHttpRequest的功能，但旨在更具可扩展性和效率。

fetch的核心是HTTP接口的抽象，包括请求、响应、头、体和用于初始化异步请求的全局Fetch。得益于这些由JavaScript实现的抽象HTTP模块，其他接口可以方便地使用这些功能。此外，Fetch利用了基于Promise的请求——的异步特性。

请注意，fetch规范主要在两个方面不同于jQuery.ajax()，请记住：

当收到表示错误的HTTP状态代码时，从fetch()返回的Promise不会被标记为拒绝，即使HTTP响应的状态代码是404或500。相反，它将Promise状态标记为resolve(但将resolve返回值的ok属性设置为false)，并且仅在网络失败或请求被阻止时标记为reject。默认情况下，fetch不会从服务器发送或接收任何cookies。如果站点依赖于用户会话，它将导致未经身份验证的请求(要发送cookies，您必须设置凭据选项)。发现问题

在求解提取跨域请求接口时，通常在返回头中添加后台接口

//允许所有域名的脚本访问资源头(' access-control-Allow-origin : * ')；

确实这样可以解决跨域请求的问题，但是如果我们要在请求的时候添加session，那么这个设置就会出现问题。

Fetch通过设置credentials: ' include '来添加Cookie身份验证

Fetch (URL，{method :' post '，body : JSON。Stringify (params)，模式：' CORS '，//添加Cookie凭证： 'include '请求时，headers:新标头({ ' Accept ' : ' application/JSON '，' Content-Type ' : ' application/x-www-form-URL encoded；Charset=utf-8 '，})})被设置，请求被有把握地发起。却发现网络请求报告了一个错误

当凭据标志为真时，不能在“访问控制-允许-来源”标头中使用通配符“*”。因此，不允许访问Origin 'http://localhost:3000 '

解决办法

原因是当网络请求需要携带Cookie时，访问控制允许源不能设置为*号，此时域名应该分配给访问控制允许源

这样就可以达到跨域请求的同时传输Cookie的目的

列表项摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。