react-admin 没有'访问控制允许来源'

Posted 2023-03-04

【中文标题】react-admin 没有\'访问控制允许来源\'

【英文标题】：react-admin No 'Access-Control-Allow-Origin'react-admin 没有'访问控制允许来源'

【发布时间】：2020-05-10 11:52:22

【问题描述】：

我正在尝试在我的项目中使用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) 
                registry
                        .addMapping("/**")
                        .allowedOrigins("http://localhost:3000");
                registry
                        .addMapping("/admin*")
                        .allowedOrigins("http://localhost:3001")
                        .exposedHeaders("Content-Range");

            
        ;
    

错误：CORS 策略已阻止从源“http://localhost:8080/admin/user?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22ASC%22%5D”获取“http://localhost:8080/admin/user?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22ASC%22%5D”的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

为什么会出现这个错误？

在邮递员上工作正常：

后来我什至添加了：responseHeaders.set("Origin", "http://localhost:3001");

还是没有希望。

如何解决？

【问题讨论】：

你可以在这里查看我的答案：***.com/a/42053745/986160。您需要正确配置您的 Spring Boot 后端

【参考方案1】：

这是浏览器导致的交叉错误。

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

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

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

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

并确保您允许后端的正确 url

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

【讨论】：

谢谢，实际问题是，我在3002 上运行管理端口，而不是3000

执行此操作后，我现在收到错误 对“getList”的响应必须类似于 data : [...] ，但接收到的数据不是数组。 'getList' 的 dataProvider 可能是错误的 .. 我正在使用 simpleRestProvider.. 有什么想法吗？

哦，当 API 调用包括主机和端口时，我使用的是绝对 url，删除它开始正确使用代理 url。那么不需要在服务器端允许来源。谢谢！