CORS 被阻止 - Spring 啟動和反應

Question

我有我的 Spring 啟動 REST API。 鏈接：“http://localhost:8080/api/components/component/list”

對於前端，我使用的是 React，上面是我希望 React Admin 應用程序使用的鏈接。

這是我的 Spring Boot 的 CORS 代碼，它位於一個名為 CorsConfig 的單獨 class 中：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry myCorsRegistry){
             myCorsRegistry.addMapping("/**")
            .allowedOrigins("http://localhost:3000")  //frontend's link
            .allowedHeaders("*")
            .allowedMethods("*")
            .allowCredentials(true)
            .maxAge(4800);
     }

}

我也試過這個，但它仍然不起作用：

@Configuration
public class CorsConfig{

   @Bean
   public WebMvcConfigurer corsConfigurer() {
       return new WebMvcConfigurerAdapter() {
           @Override
           public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                    .allowedOrigins("http://domain2.com")
                    .allowedMethods("PUT", "DELETE")
                    .allowedHeaders("header1", "header2", "header3")
                    .exposedHeaders("header1", "header2")
                    .allowCredentials(false).maxAge(3600);
           }
       };
    }
}

對於我的 controller class 我有以下內容：

@CrossOrigin
@RequestMapping("/api/components/component")
@RestController
public class Component{
     @Autowired
     //code...
}

這是我的反應代碼：

const parentURL = 
restProvider(`http://localhost:8080/api/components/component`);

function App() {
    return(
       <Admin dataProvider={parentURL}>
          <Resource name="list" list={ListGuesser} />
        </Admin>
    );
 }

這是我在 Chrome 控制台中遇到的錯誤：

Access to fetch at 'http://localhost:8080/api/components/component/DashBoard? 
filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22ASC%22%5D' from origin 'http://localhost:3000' 
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

我的問題：如何解決上述錯誤？

Answer 1

請在 package 的項目中添加以下文件，其中存在主 spring 引導 class。 這對我來說適用於 Spring 啟動、React 生態系統中的所有 CORS 問題。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
@EnableWebMvc
public class CorsWebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
        registry.addMapping("/*.html");
    }

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addRedirectViewController("/api/v2/api-docs", "/v2/api-docs");
        registry.addRedirectViewController("/api/swagger-resources/configuration/ui",
                "/swagger-resources/configuration/ui");
        registry.addRedirectViewController("/api/swagger-resources/configuration/security",
                "/swagger-resources/configuration/security");
        registry.addRedirectViewController("/api/swagger-resources", "/swagger-resources");
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/swagger-ui.html**")
                .addResourceLocations("classpath:/META-INF/resources/swagger-ui.html");
        registry.addResourceHandler("/api/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
    }}

Answer 2

嘗試在 controller 頂部添加 @CrossOrigin(origins ="http://localhost:3000")。 它應該工作。

Answer 3

哦，是的，這個 CORS 的東西執行得非常糟糕。 我被 React + Spring Boot + Spring Security 困住了。

幫助我的是

@Configuration
public class CorsConfig{

   @Bean
   public WebMvcConfigurer corsConfigurer() {
       return new WebMvcConfigurerAdapter() {
           @Override
           public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                    .allowedOrigins("http://domain2.com")
                    .allowedMethods("*");
           }
       };
    }
}

我建議你多嘗試這種方法。 我可以肯定的是，您在allowedMethods中輸入的內容很重要。 我完全記得，當我列出所有可能的方法（包括選項）時，它對我不起作用。 但是，一旦我將其更改為"*" ，它就起作用了。

我也有單獨http.cors(); 在我的 Spring 安全configure方法的最后，以防有人對這種特殊情況感到疑惑。

Answer 4

在我看來，你只需要 addMapping 和 allowedOrigins，比如：

@Override
public void addCorsMappings(CorsRegistry myCorsRegistry){
    myCorsRegistry.addMapping("/**")
            .allowedOrigins("http://localhost:3000");
}

謝謝，