Angular 6 到 Spring 引导休息服务 CORS 问题

Posted 2023-02-25

【中文标题】Angular 6 到 Spring 引导休息服务 CORS 问题

【英文标题】：Angular 6 to Spring boot rest service CORS issue

【发布时间】：2019-04-05 15:45:30

【问题描述】：

我创建了一个 Angular 6 应用程序，将其作为静态 Web 托管部署在 AWS S3 存储桶上。 从后端我创建了一个 Spring Boot 应用程序，它公开了休息服务，并在 CroosOrigin 的控制器和方法级别上有注释。它也部署在 AWS tomcat EC2 实例上。

当我尝试单击 Angular 应用程序中的按钮时，它会尝试调用已部署的 Spring Rest Web 服务。在控制台我得到 CORS 策略：对预检请求的响应没有通过访问控制检查：它没有 HTTP ok 状态。

当我尝试通过 Postman 调用这些服务时，它工作正常。我在我的 chrome 中添加了 CORS 的 chrome 扩展。

当我尝试从 Angular 应用程序调用相同的服务时，任何人都可以帮助我为什么它不起作用。

提前致谢。

【参考方案1】：

在 Spring Boot 中，您可以启用全局 CORS 是声明一个 @Configuration 类 CorsConfig 类定义 @Bean WebMvcConfigurer 覆盖 addCorsMappings

@Configuration
public class CorsConfig 

    @Bean
    public WebMvcConfigurer corsConfigurer() 
        return new WebMvcConfigurerAdapter() 
            @Override
            public void addCorsMappings(CorsRegistry registry) 
                registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE").allowedOrigins("*")
                        .allowedHeaders("*");
            
        ;
    

或者用 implementsWebMvcConfigurer 定义一个MvcConfig 类，然后覆盖addCorsMappings。如下：

@Configuration
public class MvcConfig implements WebMvcConfigurer 
      @Override
      public void addCorsMappings(CorsRegistry registry) 
         registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE").allowedOrigins("*")
                            .allowedHeaders("*");
                
            ;
        

【讨论】：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

你能告诉我你的http配置类吗

【参考方案2】：

尝试将此类过滤器类添加到您的 Spring Boot 应用程序中：

@Component
public class CorsFilter implements Filter 

    @Override
    public void init(FilterConfig filterConfig) throws ServletException 
    

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException 
        HttpServletResponse res = (HttpServletResponse) response;
        HttpServletRequest req = (HttpServletRequest) request;

        res.setHeader("Access-Control-Allow-Origin", "*");
        res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS");
        res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Accept-Encoding, Accept-Language, Host, Referer, Connection, User-Agent, authorization, sw-useragent, sw-version");

        // Just REPLY OK if request method is OPTIONS for CORS (pre-flight)
        if ( req.getMethod().equals("OPTIONS") ) 
            res.setStatus(HttpServletResponse.SC_OK);
            return;
        
        filterChain.doFilter(request, response);
    

    @Override
    public void destroy()  

【讨论】：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。