解决从React App调用获取时的CORS问题

Question

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

据我所知，解决cors问题有几种方法，其中两种是我知道的：

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

2）允许来自服务器其余API的标头-我发现了一个名为@CrossOrigin的spring批注（origins =“ ”，allowedHeaders =“ ”）） https://howtodoinjava.com/spring5/webmvc/spring-mvc-cors-configuration/

使用第一种方法：

我执行的第一个呼叫是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();
    }
}

Answer 1

  

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

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

他们不做启用CORS所需做的其他事情。

尤其是，它们倾向于不处理可以在请求中发送凭据之前所需的预检请求。所以：

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

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