为Spring Cloud Function配置CORS以适配Angular应用

问题原因分析 #

你之前的配置无效主要有两个核心原因：

1. @CrossOrigin注解加在@SpringBootApplication类上完全无效，该注解仅对控制器类或控制器方法生效，而Spring Cloud Function的函数端点是框架自动生成的请求处理入口，并非你的启动类。
2. 你配置的WebMvcConfigurer仅对/greeting-javaconfig路径生效，但实际调用的是/reverseString端点，路径不匹配导致配置未被触发。

有效解决方案 #

方案1：通过配置文件全局启用CORS（推荐） #

直接在Spring Boot应用的application.properties或application.yml中添加Spring Cloud Function专属的CORS配置，无需编写额外Java代码：

application.properties

# 允许所有源跨域（也可指定具体源如http://localhost:4200）
spring.cloud.function.web.cors.allowed-origins=*
# 允许的请求方法（必须包含OPTIONS，因为Angular会先发预检请求）
spring.cloud.function.web.cors.allowed-methods=POST,OPTIONS
# 允许所有请求头
spring.cloud.function.web.cors.allowed-headers=*

application.yml

spring:
  cloud:
    function:
      web:
        cors:
          allowed-origins: "*"
          allowed-methods: "POST,OPTIONS"
          allowed-headers: "*"

方案2：针对函数端点配置WebMvcConfigurer（Servlet环境） #

如果你的Spring Boot应用依赖spring-boot-starter-web（Servlet环境），修改WebMvcConfigurer的映射路径为你的函数端点，并明确允许所需请求方法：

@SpringBootApplication
public class CloudFunctionApplication {

    public static void main(String[] args) {
        SpringApplication.run(CloudFunctionApplication.class, args);
    }

    @Bean
    public Function<String, String> reverseString() {
        return value -> new StringBuilder(value).reverse().toString();
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                // 针对reverseString函数的端点配置CORS
                registry.addMapping("/reverseString")
                        .allowedOrigins("*")
                        .allowedMethods("POST", "OPTIONS") // 必须包含OPTIONS处理预检请求
                        .allowedHeaders("*");
            }
        };
    }
}

方案3：配置CorsWebFilter（WebFlux环境） #

如果你的Spring Boot应用依赖spring-boot-starter-webflux（WebFlux环境），需要配置CorsWebFilter而非WebMvcConfigurer：

@SpringBootApplication
public class CloudFunctionApplication {

    public static void main(String[] args) {
        SpringApplication.run(CloudFunctionApplication.class, args);
    }

    @Bean
    public Function<String, String> reverseString() {
        return value -> new StringBuilder(value).reverse().toString();
    }

    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration corsConfig = new CorsConfiguration();
        corsConfig.addAllowedOrigin("*");
        corsConfig.addAllowedMethod("POST");
        corsConfig.addAllowedMethod("OPTIONS");
        corsConfig.addAllowedHeader("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/reverseString", corsConfig);

        return new CorsWebFilter(source);
    }
}

额外注意事项 #

• 确保Angular代码的请求方法与Spring Cloud Function的映射规则匹配：Function类型的函数默认映射为POST请求，你的Angular代码使用POST是正确的。
• 生产环境建议将allowed-origins配置为具体的前端域名（如http://your-frontend-domain.com），而非通配符*，提升安全性。

内容的提问来源于stack exchange，提问作者M.S.Naidu