反應管理員沒有“訪問控制允許來源”

Question

我正在嘗試在我的項目中使用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");

            }
        };
    }

錯誤：訪問在“ http://localhost:8080/admin/user?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22ASC%22%5D ”從源獲取“ http://localhost:3001 ”已被 CORS 策略阻止：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 如果不透明響應滿足您的需求，請將請求的模式設置為“no-cors”以在禁用 CORS 的情況下獲取資源。

為什么我收到這個錯誤？

郵遞員工作正常：

后來我什至補充說： responseHeaders.set("Origin", "http://localhost:3001");

還是沒有希望。

如何解決？

Answer 1

這是瀏覽器導致的 cro 錯誤。

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

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

現在您只需要提供 api 請求的相對路徑

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

並確保您允許后端的正確網址

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