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 ?

you can check my answer here: https://stackoverflow.com/a/42053745/986160. You need to configure your spring boot backend properly — Michail Michailidis, Feb 06 '20 at 06:09

score 1 · Accepted Answer · edited Feb 12 '20 at 06:50

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

edited Feb 12 '20 at 06:50

Maifee Ul Asad

3,992
6
38
86

answered Jan 24 '20 at 07:38

Prakash Karena

2,525
1
7
16

thanks, the actual problem was, i was running the admin port on `3002` instead of `3000` – Maifee Ul Asad Feb 12 '20 at 05:22
After doing this, I'm now getting the error _The response to 'getList' must be like { data : [...] }, but the received data is not an array. The dataProvider is probably wrong for 'getList'_ .. I'm using simpleRestProvider.. any ideas? – cgitosh Sep 25 '21 at 18:53
Oh I was using absolute url when APIs called including host & port, removing that started using proxy url correctly. then no need to allow origins on the server side. thanks! – Ranjeet Singh Feb 01 '22 at 07:52

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

1 Answers1

Linked