react-admin No 'Access-Control-Allow-Origin'

Question

I'm trying to use react-admin in my project, which requires Content-Range .

So in my server I have written :

@GetMapping("admin/user")
    ResponseEntity<List<User> > getAll()
    {
        System.out.println(new Date());;

        HttpHeaders responseHeaders = new HttpHeaders();
        responseHeaders.set("Content-Range",
                "posts 0-"+userRepository.findAll().size()+"/"+userRepository.findAll().size());

        return ResponseEntity.ok()
                .headers(responseHeaders)
                .body(userRepository.findAll());
    }

Also configured CORS :

@Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry
                        .addMapping("/**")
                        .allowedOrigins("http://localhost:3000");
                registry
                        .addMapping("/admin*")
                        .allowedOrigins("http://localhost:3001")
                        .exposedHeaders("Content-Range");

            }
        };
    }

Error : Access to fetch at ' http://localhost:8080/admin/user?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22ASC%22%5D ' from origin ' http://localhost:3001 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Why am I getting this error ?

Working fine on postman:

Later I even added : responseHeaders.set("Origin", "http://localhost:3001");

Still no hope.

How this can be resolved ?

Answer 1

This is cros error causing by browser.

You can configure your proxy with your react app package.json file just add

"proxy" : "http://localhost:8080"  

Now you just need to provide relative path to your api request

 Example : '/admin/user/'  // your app going to make request to http://localhost:8080/admin/user 

And also make sure you are allowing right url of your back-end

                  registry
                    .addMapping("/**")
                    .allowedOrigins("http://localhost:3000");   // make sure this is right url of your frontend