CORS Spring Boot 和 React 管理员 - React答案

【问题标题】：CORS Spring Boot and React Admin - ReactCORS Spring Boot 和 React 管理员 - React
【发布时间】：2021-07-03 05:30:28
【问题描述】：

我正在使用“React Admin”来创建管理界面（前端）。我正在为我的 REST API 使用 Spring Boot。我的 React 应用程序的 url 是：“http://localhost:3000”。我的 Spring boot api 的 url 是：“http://localhost:8080”。

这是我用于 CORS 配置的 Spring Boot 代码，它位于一个名为 CorsConfig 的单独类中：

@Configuration
public class CorsConfig implements WebMvcConfigurer{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/**")
         .allowedOrigins("http://localhost:3000")  //frontend's link
         .allowedHeaders("*")
         .allowedMethods("*");
    }
}

这是我的 React 代码：

import React from 'react';
import {Admin,ListGuesser, Resource} from 'react-admin';
import restProvider from 'ra-data-simple-rest';


const parentURL = restProvider(`http://localhost:8080`);

function App() {
    return(
       <Admin dataProvider={parentURL}>
          <Resource name="DashBoard" list={ListGuesser}/>
          <Resource name="list" list={ListGuesser} />
       </Admin>
    );
}
export default App;

在“Chrome DevTools”中，我收到以下错误，它们抱怨后端配置的 CORS 策略：

问题 1：

Error Message 1

问题 2： 我还收到以下错误，抱怨restProvider： Error Message 2

以上2个错误有哪些可能的解决方案？

【问题讨论】：

标签： javascript java reactjs spring spring-boot

【解决方案1】：

您需要在 Spring boot 中添加 CORSFilter，正如我在这个答案中提到的 - https://stackoverflow.com/a/66882700/3709922

在Access-Control-Allow-Origin 标头值中添加允许的域。 * 表示允许所有域。

在Access-Control-Expose-Headers标头值列表中添加Content-Range，如：

httpServletResponse.addHeader("Access-Control-Expose-Headers",
        "..., Content-Range");`

【讨论】：