Spring Boot+Angular Docker部署后CORS跨域问题求助

方法1：使用相对路径配置API地址（最适合你的场景） #

你的前端已经打包到Spring Boot的static目录，意味着前端页面和API接口由同一个Spring Boot容器提供，完全不需要硬编码绝对地址。

修改Angular的environment.ts（生产环境同步修改environment.prod.ts）：

baseUrl: '/api/'

这样前端发起请求时，会自动复用当前页面的域名/IP（比如你访问Docker容器用的http://<服务器IP>:8080或http://localhost:8080）拼接API路径，彻底避免跨域问题。

修改完成后，重新用frontend-maven-plugin打包前端，再重新构建Spring Boot的Docker镜像，最后用docker-compose部署即可。

为什么会出现CORS错误？ #

本地运行时，前端页面和API请求的地址都是http://localhost:8080，协议、域名、端口完全一致（同源），所以浏览器不会触发CORS限制。但Docker部署后，如果你通过服务器IP（比如http://192.168.1.100:8080）访问前端，而前端仍请求http://localhost:8080/api/，此时页面的源是http://192.168.1.100:8080，请求目标是http://localhost:8080，属于不同源，浏览器就会拦截请求并抛出CORS错误。

备选方案：配置Spring Boot允许跨域（适合前后端分离部署场景） #

如果后续需要将前端和后端分开部署，可以在Spring Boot中添加全局CORS配置：

创建配置类：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        // 学习环境允许所有来源，生产环境需指定具体域名
        config.addAllowedOriginPattern("*");
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        config.setAllowCredentials(true);
        source.registerCorsConfiguration("/api/**", config);
        return new CorsFilter(source);
    }
}

同时修改Angular的baseUrl为Docker容器所在的真实地址：

baseUrl: 'http://<服务器IP>:8080/api/'

内容的提问来源于stack exchange，提问作者Tamás Mészáros