CORS spring boot和React Admin-React

Question

我正在使用“React admin”创建一个管理界面（前端）。我正在使用spring boot作为我的REST API。我的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：

错误消息1

问题2：我还收到以下错误，这是对RESTProvider的抱怨：error Message 2

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

Answer 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");`