react-admin否'Access-Control-Allow-Origin' [英] react-admin No 'Access-Control-Allow-Origin'

问题描述

我试图在项目中使用 react-admin ，这需要 Content-Range 。

所以在我的服务器上，我写了：

  @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（））; 
} 
  

还配置了CORS：

  @Bean 
 public WebMvcConfigurer corsConfigurer（）{
 return new WebMvcConfigurer（）{
 @Override 
 public void addCorsMappings（CorsRegistry注册表）{
 Registry 
 .addMapping（ / **）
 .allowedOrigins（ http：// localhost：3000）; 
注册表
 .addMapping（ / admin *）
 .allowedOrigins（ http：// localhost：3001）
 .exposedHeaders（ Content-Range）; 
 
} 
}; 
} 
  

错误：在'

后来我甚至添加了： responseHeaders.set（ Origin， http：// localhost：3001）;

仍然没有希望。

如何解决？

解决方案

这是由浏览器引起的cros错误。

您可以使用react app package.json文件配置代理，只需添加

 代理： http：// local host：8080 
  

现在，您只需要提供api请求的相对路径

 示例：'/ admin / user /'//您的应用程序将向http：// localhost：8080 / admin / user $ b发出请求$ b  

还要确保您允许后端使用正确的网址

 注册表
 .addMapping（ / **）
 .allowedOrigins（ http：// localhost：3000）; //确保这是您前端
  

的正确网址

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 ?

解决方案

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 

这篇关于react-admin否'Access-Control-Allow-Origin'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！