ReactJS 中的访问控制允许来源问题答案

【问题标题】：Access-Control-Allow-Origin Problem in ReactJSReactJS 中的访问控制允许来源问题
【发布时间】：2021-03-02 13:10:03
【问题描述】：

我在尝试访问后端时遇到问题。

问题：

在 ReactJs 中有任何配置 CORS 吗？（在 axios create 或 ..中）
在 Spring Boot 和 ReactJs 中进行 CORS 配置有什么最好的方法吗？

配置如下我所做的，

从源 'http://localhost:3000' 访问 'http://localhost:8282/opsprime/api/products?title_contains=a' 处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

所以，我将后端（spring boot）配置为，

@RestController
@CrossOrigin(origins = "*", allowedHeaders = "*")
public class TestController {
....
}

这是 reactJs 的配置，

export default axios.create({
    baseURL: 'http://localhost:8282/opsprime/api',
    timeout: 1000,
    headers: {
         'Authorization' : `Bearer 4b21949a-4829-43cc-asex-1d0512478676`
       }
  });

【问题讨论】：

我猜你正在使用 chrome，它有阻止每个 cors 请求的策略。为了开发，你必须安装一个类似this的扩展，它允许你的浏览器上的cors请求。
我以前做过这个..

标签： reactjs spring-boot axios cors

【解决方案1】：

将此代码添加到您的spring boot应用程序配置中，您可以更改CORS_ORIGIN_ALLOW的值以识别可以实现CROSS的方法。

@Configuration
public class CorsSecurity implements WebMvcConfigurer {
    private final String[] CORS_ORIGIN_ALLOW = {"/**"};

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        for (String cors : CORS_ORIGIN_ALLOW)
            registry.addMapping(cors).allowedOrigins("*").allowedHeaders("*").allowedMethods("*");
    }
}

【讨论】：

谢谢。我的 pom 文件（oauth 依赖项）有问题，所以我确实禁用了它并重新启动服务器，然后就可以了。然后我添加了 oauth 依赖项。它工作正常