时间戳

首页 > 解决方案 > 从 React App 调用 fetch 时解决 CORS 问题

reactjs - 从 React App 调用 fetch 时解决 CORS 问题

问题描述

我正在尝试将我的 React 客户端应用程序中的 http 请求发送到 RestfulApi（使用 Spring 构建），但我遇到了 CORS 问题。

据我了解，解决 cors 问题有多种方法，其中 2 种我知道：

1）在您的浏览器上安装一个CORS扩展（您的浏览器将面临安全风险，但如果它只是在开发过程中并且可以启用/禁用，那么我可以忍受它）

2) 允许来自您的服务器休息 API 的标头 - 我找到了一个名为 @CrossOrigin(origins = " ", allowedHeaders = " ") https://howtodoinjava.com/spring5/webmvc/spring-mvc-cors-configuration/的 spring 注释

使用第一种方法：

我执行的第一个调用是 GET 登录请求，它可以工作，但是我得到一个带有空标题的空响应！

第二次调用是另一个获取一些项目详细信息的 GET 请求，但我收到了 401！

通过一些调查，我了解到需要发送浏览器 sessionId（存储在 cookie 中）并将其作为参数传递给 HTTP 请求以便获得授权......但尚未管理使其工作。

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

我到达了这个页面： https ://www.baeldung.com/spring-security-cors-preflight

向我的休息服务器应用程序添加另一个类也没有帮助：

    @EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // ...
        http.cors();
    }
}

标签： reactjsspring-securitycorsfetch

解决方案

在您的浏览器上安装 CORS 扩展（您的浏览器将面临安全风险，但如果它只是在开发过程中并且可以启用/禁用，那么我可以忍受它）

CORS 扩展往往只是将Access-Control-Allow-*标头注入响应中。

他们不会做所有其他需要做的事情来启用 CORS。

特别是，他们往往不处理在请求中发送凭据之前需要的预检请求。所以：

  1. 浏览器发送一个预检请求，请求允许使用凭据发出请求
  2. 服务器响应未经授权的错误，因为未发送凭据
  3. 扩展注入Access-Control-Allow-*标头
  4. 浏览器拒绝访问对 JS 的响应，因为响应具有未授权状态（Access-Control-Allow-*标头不足以覆盖该状态）

在需要 CORS 时实施真正的解决方案。浏览器扩展是浪费时间，因为最终需要用真正的解决方案替换，并且首先只能在部分情况下工作。

推荐阅读