Docker部署Angular+Node.js跨容器请求报400错误求助

本地运行Angular前端和Node.js后端一切正常，但容器化后前端调用后端时浏览器控制台报错：

Failed to load resource: the server responded with a status of 400 (Bad Request)
Validation error: Invalid request headers

本地环境（正常运行） #

• 使用ng serve启动Angular
• 使用npm start启动Node.js后端
• 前端与后端通信正常

Docker环境（存在问题） #

• Angular和Node.js均已容器化
• 通过Dockerfile构建并运行容器
• 创建了自定义网络custom-net，两个容器处于同一网络
• 两个容器均已启动，可分别独立访问前端和后端

Node.js Dockerfile #

FROM node:20

WORKDIR /usr/src/app

COPY package.json package-lock.json ./

COPY . .

RUN npm ci --legacy-peer-deps

EXPOSE 3000

CMD [ "node", "server.js" ]

Angular Dockerfile #

FROM node:20

WORKDIR /usr/src/app

COPY package.json package-lock.json ./

COPY . .

RUN npm ci --legacy-peer-deps

EXPOSE 3100

CMD ["npm", "start"]

容器运行命令 #

docker run \
--name=frontend \
--network=custom-net \
--publish=host-ip:3100:3100 \
frontend

docker run \
--name=backend \
--network=custom-net \
--publish=host-ip:3000:3000 \
backend

排查与解决方案 #

1. 修正前端API请求地址 #

本地开发时前端可能硬编码了localhost:3000作为后端地址，但容器化后，浏览器从宿主机器发起请求，需将前端配置中的后端地址改为宿主机器的IP或域名。

修改Angular环境配置文件（如src/environments/environment.ts）：

export const environment = {
  production: false,
  apiUrl: 'http://你的宿主IP:3000' // 替换为实际宿主IP
};

2. 检查后端请求头校验逻辑 #

400错误明确指向请求头无效，需核对后端的校验规则：

• 若后端校验Host头，需将宿主IP添加到允许列表（本地运行时Host为localhost，容器化后变为宿主IP）；
• 确认前端请求是否携带了后端要求的所有自定义头，避免遗漏导致校验失败。

3. 配置正确的CORS规则 #

前端请求从浏览器发起属于跨域请求，需确保Node.js后端配置了正确的CORS策略：
使用cors中间件时，指定允许的前端来源：

const cors = require('cors');
app.use(cors({
  origin: 'http://你的宿主IP:3100', // 匹配前端访问地址
  credentials: true // 若需要携带Cookie等凭证则开启
}));

4. 验证容器间网络连通性 #

进入前端容器，测试能否直接访问后端容器，排查网络问题：

docker exec -it frontend curl http://backend:3000/你的测试接口路径

如果请求成功，说明容器间网络正常，问题出在浏览器到后端的请求链路；如果失败，检查后端容器是否正常监听3000端口，或Docker网络配置是否有误。

5. 查看后端日志获取细节 #

通过后端容器日志定位具体错误：

docker logs backend

日志通常会明确指出哪个请求头不符合要求，便于快速修复。

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