ReactJS中的访问控制允许起源问题

Question

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

问题：

1. ReactJs中有配置CORS吗？(在axios create或..中(
2. 在Spring Boot和ReactJs中有没有最好的方法来进行CORS配置

配置如下我所做的，

CORS策略已阻止从原点'http://localhost:3000'访问'http://localhost:8282/opsprime/api/products?title_contains=a'上的XMLHttpRequest：对飞行前请求的响应未通过访问控制检查：它没有HTTP正常状态。

因此，我将后端(春季启动(配置为，

@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`
}
});

Answer 1

将此代码添加到您的春季启动应用程序配置中，您可以更改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("*");
}
}