Docker容器中前后端交互出现CORS错误求助

问题根源 #

• 浏览器发起跨域请求时，不识别Docker内部服务域名api:5000：浏览器请求从本地机器发起，不在Docker内部网络中，无法解析api服务名；同时URL缺少http://协议前缀，直接触发CORS政策拦截。
• 前端容器内curl能正常请求是因为容器处于Docker网络中，Docker DNS可解析api服务，和浏览器的请求环境完全不同。

解决方案 #

1. 修正前端环境变量配置 #

修改docker-compose.yml中frontend服务的VITE_API_URL，替换为宿主机可直接访问的地址：

frontend:
  image: rafaelbackx.azurecr.io/resto-frontend
  restart: always
  depends_on:
    - api
  environment:
    # 换成宿主机地址，浏览器可直接访问映射的5000端口
    VITE_API_URL: http://localhost:5000
    port: 3000
  ports:
    - "3000:3000"

2. 修复entrypoint.sh的变量替换逻辑 #

当前脚本给URL添加了多余单引号，会导致生成的请求URL带引号（如'http://localhost:5000'），属于无效格式。修改entrypoint.sh：

#!/bin/sh

ROOT_DIR=./dist
ls $ROOT_DIR
# 移除多余的单引号包裹
URL="$VITE_API_URL"
echo $URL
echo "Replacing env constants in JS"
for file in $(find $ROOT_DIR -type f -name \*.js);
do
  echo "Processing $file ...";
  sed -i "s|VITE_API_URL|$URL|g" $file
done
http-server -p $port dist/

3. 加固后端CORS配置（可选） #

虽然默认app.use(cors())允许所有origin，但若需更严谨，可明确指定允许的前端origin：

// 替换原有的app.use(cors())
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true // 若需携带Cookie等凭证则开启
}))

验证步骤 #

1. 重启所有容器：docker-compose down && docker-compose up -d
2. 打开浏览器访问http://localhost:3000发起请求，CORS错误应消失。

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