如何解决 react spring boot CORS 问题？答案

【问题标题】：How do I solve react spring boot CORS problem?如何解决 react spring boot CORS 问题？
【发布时间】：2021-11-14 00:02:29
【问题描述】：

这是我的 Spring Boot CORS 过滤器类：

@Component
public class CorsingFilter {
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // Don't do this in production, use a proper list  of allowed origins
        config.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));
        config.setAllowedHeaders(Arrays.asList("Origin", "Content-Type", "Accept"));
        config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH"));
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

这是我的控制器：

@RestController
@RequestMapping("/test")
public class TestController {

    @CrossOrigin(origins = "http://localhost:3000")
    @GetMapping("/cox")
    public String getCox(){
        return "COX";
    }
}

这是我的反应请求：

let url = "http://localhost:8080/test/cox";
    const agent = new https.Agent({
      rejectUnauthorized: false
    });
    try {
      const res = await axios.get(url, {
        auth: {
          username: 'user',
          password: '123456'
        }
        ,
        headers: {
          'Content-Type': 'application/json',
          "Access-Control-Allow-Origin": "http://localhost:8080",
          'Access-Control-Allow-Credentials': true,
          "Access-Control-Allow-Methods": 'HEAD, GET, POST, PUT, PATCH, DELETE',
          "Access-Control-Allow-Headers": 'Origin, Content-Type, X-Auth-Token',
        },
        httpsAgent: agent
      })
      console.log(res)
    } catch (err) {
      console.log(err)
    }

Here's what the browser cors error looks like
Here's what the request looks like

此外，在浏览器中执行请求时请求有效（从浏览器访问 localhost:8080）

【问题讨论】：

标签： reactjs spring-boot cors

【解决方案1】：

假设

React 应用是使用create-react-app 创建的
前端和后端将部署在生产中的同一台服务器上。

解决方案

在 React 应用的 package.json 中添加 "proxy": "http://localhost:8080"。
修改url为/test/cox。

https://create-react-app.dev/docs/proxying-api-requests-in-development

请注意，其他流行的 React 框架如 Gatsby 和 Next.js 也有类似的设置，这里的关键字是“代理”。

【讨论】：