CORS Spring Boot and React Admin - React

Question

我正在使用"React Admin；用于创建管理界面(前端(。我正在为我的REST API使用Spring引导。我的React应用程序的url是："http://localhost:3000"。我的Spring引导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：错误消息2

对于以上两个错误，可能的解决方案是什么？

Answer 1

正如我在这个答案中提到的，您需要在Spring引导中添加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");`