Docker Compose中Nginx+NodeJS+React的CORS问题求助

核心问题 #

1. Docker内部服务名无法被浏览器识别：backend是Docker Compose内部网络的服务别名，仅在容器之间有效。浏览器运行在宿主机环境，无法解析这个域名，导致请求根本无法正确发送到后端服务。
2. 后端未配置CORS响应头：即使请求能到达后端，浏览器的同源策略也会因为后端未返回允许跨域的响应头而拦截结果。
3. Nginx的CORS配置无效：你当前在Nginx的/ location中添加的CORS头，仅针对前端静态资源的请求，对后端接口的跨域请求没有作用。

解决方案（推荐方案：Nginx反向代理） #

通过Nginx将前端的接口请求转发到后端服务，实现同域名请求，彻底避免跨域问题。

1. 修改Nginx配置（default.conf） #

添加一个新的location块来代理后端接口：

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    # 代理后端接口：将/api开头的请求转发到backend服务
    location /api/ {
        proxy_pass http://backend:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    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;
    }
}

2. 修改React接口调用代码 #

将请求地址改为相对路径/api/message，让Nginx自动转发到后端：

useEffect(() => {
    fetch('/api/message')
      .then(response => response.text())
      .then(data => setMessage(data))
      .catch(error => console.error('Error al obtener el mensaje:', error));
  }, []); 

3. 重新构建并部署 #

重新构建React镜像，然后重启Docker Compose服务：

docker-compose down
docker-compose up --build

备选方案：配置后端CORS + 修改请求地址 #

如果不想使用反向代理，可以通过以下方式解决：

1. 在NodeJS后端配置CORS #

安装cors依赖并启用跨域支持：

npm install cors

在Node服务代码中添加CORS中间件：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许所有跨域请求（生产环境建议指定具体的Origin，比如http://localhost:5173）
app.use(cors());

app.get('/message', (req, res) => {
  res.send('你的后端响应内容');
});

app.listen(3000, () => {
  console.log('后端服务运行在3000端口');
});

2. 修改React请求地址 #

将请求地址改为宿主机可访问的地址（因为后端容器映射了3000端口到宿主机）：

useEffect(() => {
    fetch('http://localhost:3000/message')
      .then(response => response.text())
      .then(data => setMessage(data))
      .catch(error => console.error('Error al obtener el mensaje:', error));
  }, []); 

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