docker-compose部署前后端项目时浏览器连接后端报CORS策略错误

你遇到CORS报错的核心原因是前端API请求完全没走你配置的Nginx反向代理，直接触发了浏览器同源策略限制：

• 你访问前端页面的地址是localhost:80，但axios写死了请求http://localhost:5002/api，两个地址端口不一致，属于跨源请求
• Nginx里配置的/api转发、CORS头规则，只对发到localhost:80/api的请求生效，你直接请求5002端口的流量根本不经过前端Nginx，这些配置完全不生效
• 就算请求走到Nginx，你现在的proxy_pass写法也有路径拼接问题，很容易出现接口404

1. 修改axios请求配置 #

把baseURL改成相对路径，让所有API请求默认发到当前前端服务的80端口，走Nginx代理：

const instance = axios.create({
  baseURL: "/api"
});

改完必须重新构建前端镜像，否则打包出来的静态文件还是旧的请求地址。

2. 修正Nginx代理配置 #

走同源代理的场景下根本不需要额外加CORS头，把之前加的CORS配置删掉，补全代理参数，注意proxy_pass末尾的斜杠规则：

• 如果你的Spring后端接口本身没有/api前缀（比如接口路径是/user/list），就给proxy_pass末尾加斜杠，Nginx会把请求路径里的/api前缀去掉再转发
• 如果后端接口本身就带/api前缀（比如接口路径是/api/user/list），就不要加末尾的斜杠
  参考配置如下（以后者为例，根据你实际后端路径调整）：

server {
    listen       80;
    server_name  frontend;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

如果你不想走Nginx代理，坚持让前端直接请求5002端口的后端服务，那就不用改Nginx，直接在Spring后端配置全局CORS规则，允许http://localhost来源的跨域请求即可，两种方案二选一，不要混配。

3. 重建服务验证 #

执行以下命令重建并重启服务：

docker-compose down
docker-compose up -d --build

启动后先验证容器网络连通性：进入frontend容器执行curl http://backend:8080，确认能正常访问后端，再通过浏览器访问localhost:80测试即可，此时所有请求都和前端页面同源，不会触发CORS拦截。

如果改完还是异常，按顺序检查：

• 确认两个容器都接入了my-network网络，能通过服务名互相解析
• 确认Spring后端的context-path配置和你代理转发的路径匹配，不会出现路径404
• 清理浏览器缓存再测试，避免旧的静态资源缓存导致新配置不生效

内容的提问来源于stack exchange，提问作者user9131524