CORS Spring Boot and React Admin - React

Question

I am using "React Admin" for creating an admin interface (front end). I am using Spring boot for my REST API. My React app's url is: "http://localhost:3000". My Spring boot api's url is: "http://localhost:8080".

Here is my Spring Boot code for CORS configuration, it is in a separate class called CorsConfig:

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

Here is my React code:

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;

In the "Chrome DevTools", I am getting the following errors, that are complaining about the CORS policy that is configured on the backend:

Question 1:

Error Message 1

Question 2: I am also getting the following error which is complaining about the restProvider: Error Message 2

What are the possible solutions for the above 2 errors?

Answer 1

You need to add CORSFilter in Spring boot as I have mentioned in this answer - https://stackoverflow.com/a/66882700/3709922

Add allowed domains in Access-Control-Allow-Origin header value. * means allowed all domains.

Add Content-Range in Access-Control-Expose-Headers header value list like:

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