Docker Compose技术咨询：CORS错误排查与局域网访问配置

一、解决前端后端CORS跨域错误 #

本地开发模式（npm run dev）通常自带代理功能（比如Vite、Create React App的proxy配置），但Docker部署后前端是Nginx静态服务，直接请求后端会触发浏览器跨域限制，解决方式有两种：

方法1：后端（Express）配置CORS #

1. 在后端项目安装cors依赖：

npm install cors

2. 在Express入口文件（比如app.js/index.js）中启用CORS：

const cors = require('cors');
// 允许前端访问地址，替换成你的局域网IP+前端端口，或者用'*'允许所有（生产环境不建议）
app.use(cors({
  origin: 'http://192.168.x.x:8081',
  credentials: true // 如果需要携带Cookie等凭证，开启此项
}));

方法2：Nginx反向代理（推荐） #

通过Nginx将前端的API请求转发到后端，避免跨域。修改前端的nginx.conf，在server块中新增反向代理规则：

events {
    worker_connections 1024;
}
http {
      include       /etc/nginx/mime.types;
      default_type  application/octet-stream;
      sendfile        on;
      keepalive_timeout  65;

  server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # 新增：将/api开头的请求转发到后端服务
    location /api {
        proxy_pass http://server:3000; # Docker Compose中定义的后端服务名
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  }
}

同时修改前端代码中的请求路径：将原来的绝对路径（比如http://localhost:3000/api/xxx）改成相对路径/api/xxx，这样请求会通过Nginx转发到后端，避免跨域。

二、实现局域网设备访问网站 #

你的Docker Compose配置已经做了基础设置，只需完成以下步骤：

• 确认端口绑定：当前配置中server绑定0.0.0.0:3000:3000、client绑定8081:80，0.0.0.0表示绑定主机所有网卡，已经满足局域网访问的前提。
• 获取主机局域网IP：
  • Windows：打开命令提示符，执行ipconfig，找到「以太网适配器WLAN」下的「IPv4地址」（比如192.168.1.100）
  • Linux/macOS：打开终端，执行ip addr或ifconfig，找到对应网卡的inet地址
• 配置防火墙：确保主机防火墙允许8081端口的入站连接（否则局域网设备无法访问）
• 访问方式：局域网内其他设备打开浏览器，输入http://[主机局域网IP]:8081即可访问网站

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