Docker部署React+SpringBoot应用遇CORS跨域错误求助

你遇到的核心问题是Docker容器内的localhost指向容器自身，而非宿主机，导致React容器里请求http://localhost:8080时，实际访问的是React容器内部的8080端口（而非宿主机上的SpringBoot服务），所以会返回502错误；同时因请求未到达后端，后端无法返回CORS头，触发CORS报错。

方案1：使用Docker Compose服务名替代localhost #

• 在docker-compose.yml中，SpringBoot服务的名称（比如backend）可作为域名直接访问，Docker Compose会自动在内部网络解析服务名。
• 修改React中的请求地址为：http://backend:8080/api/roll（将backend替换为你docker-compose配置里SpringBoot服务的实际名称）。
• 同时确保SpringBoot的CORS配置允许React的访问地址：

  @CrossOrigin(origins = "http://localhost:3000")
  @RestController
  @RequestMapping("/api")
  public class RollController {
      // 接口实现
  }
  

方案2：用Nginx反向代理统一域名（推荐，彻底避免CORS） #

让React和API使用同一个域名，从根源消除跨域问题：

1. 修改Nginx配置文件，将/api开头的请求转发到SpringBoot服务：

   server {
       listen 80;
       server_name localhost;
   
       # 处理React静态资源
       location / {
           root /usr/share/nginx/html;
           try_files $uri $uri/ /index.html;
       }
   
       # 转发API请求到SpringBoot服务
       location /api/ {
           proxy_pass http://backend:8080/api/;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
   

2. 在React中使用相对路径请求API：/api/roll，无需配置proxy或硬编码域名。
3. 调整docker-compose.yml：
   • React通过Nginx容器部署，端口映射为3000:80。
   • SpringBoot服务无需映射宿主机端口（内部网络通过服务名访问即可）。

为什么之前的尝试无效？ #

• 本地开发时，localhost指向宿主机，请求能正常到达SpringBoot；但Docker容器内的localhost是容器自身，所以http://localhost:8080会访问React容器内部的8080端口，导致502。
• 移除proxy或修改请求地址为api/roll时，因未正确指向SpringBoot服务的容器地址，请求依然无法到达后端，自然无法触发后端的CORS配置。

内容的提问来源于stack exchange，提问作者chk.buddi