时间戳

首页 > 解决方案 > CORS Spring Boot 和 React 管理员 - React

javascript - CORS Spring Boot 和 React 管理员 - React

问题描述

我正在使用“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("*");
    }
}

这是我的反应代码：

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

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

以上2个错误的可能解决方案是什么？

标签： javascriptjavareactjsspringspring-boot

解决方案

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

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

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

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

推荐阅读