启用跨域请求 Spring Boot

Posted

技术标签:

【中文标题】启用跨域请求 Spring Boot【英文标题】:Enabling Cross Origin Requests Spring Boot 【发布时间】:2020-05-02 17:27:03 【问题描述】:

我正在开发一个应用程序,它由一个使用 Spring Boot 开发的后端应用程序和一个使用 Angular 8 开发的前端应用程序组成。 现在我想启用 Cross Origin 让前端调用后端的 API。 继Spring documentation about CORS之后我写了如下配置类:

@EnableWebSecurity
public class WebConfig extends WebSecurityConfigurerAdapter 

    @Override
    protected void configure(HttpSecurity http) throws Exception 
        http.cors();
    

    @Bean
    CorsConfigurationSource corsConfigurationSource()
    
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    

第一次尝试是将 AllowedOrigins 设置为 Arrays.asList("*")


当我从 Angular 应用程序调用 api /dinners/ingredients 时,我在控制台中发现以下错误:

访问 XMLHttpRequest 在 'http://localhost:8081/dinners/ingredients?page=0&pageSize=10' 来自 来源“http://localhost:4200”已被 CORS 策略阻止:否 'Access-Control-Allow-Origin' 标头出现在请求的 资源。 获取http://localhost:8081/dinners/ingredients?page=0&pageSize=10 网络::ERR_FAILED

我在后端应用程序的配置中遗漏了什么吗?我在 Postman 的标头响应中没有看到“Access-Control-Allow-Origin”标头:

【问题讨论】:

你能试试它是否适用于configuration.applyPermitDefaultValues()吗? 我试过了,同样的输出。 原来后端的上下文路径是 dinner 而不是 dinners.. 错误不是很明显。 【参考方案1】:

您发布的文档指的是 spring security 4.2(您可以在您提供的 url 中看到)如果您查看更新的 spring security 文档(5.x),您将看到标准实现的 cors 过滤器要配置外部bean,需要调用withDefaults()方法。

Cors configuration spring 5.x

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter 

    @Override
    protected void configure(HttpSecurity http) throws Exception 
        http
            // by default uses a Bean by the name of corsConfigurationSource
            .cors(withDefaults()) // <------ this part
            ...
    

    @Bean
    CorsConfigurationSource corsConfigurationSource() 
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("https://example.com"));
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    

【讨论】:

感谢您的回答。我尝试将 localhost:4200* 作为允许的来源,但错误是相同的。【参考方案2】:

如果您只想为开发目的启用 CORS,那么您应该考虑使用 Angular Proxy

https://angular.io/guide/build#proxying-to-a-backend-server

注意:启用 CORS 可能会使您的应用面临漏洞,请非常具体地说明启用 CORS 的位置。

【讨论】:

【参考方案3】:

你需要像这样在Request中添加一个header:

来源:“somerandomstring”

一旦你这样做了,springboot 就会开始将 cors 标头发送到客户端。这看起来像是 springbot 中的一个错误。

【讨论】:

以上是关于启用跨域请求 Spring Boot的主要内容,如果未能解决你的问题,请参考以下文章

Spring Boot + Vue 跨域请求问题

spring boot跨域设置

Spring BootSpring Boot之跨域解决方案

Ajax - 跨域请求被阻止 - 'Access-Control-Allow-Origin' 缺失 - Spring Boot

spring boot跨域请求访问配置以及spring security中配置失效的原理解析

Spring Boot2 跨域问题