Docker环境下React代理Node后端接口出现proxy请求报错问题咨询

问题根因与修复方案 #

1. 核心错误：代理目标端口配置错误

你在后端docker-compose.yml中配置的端口映射33445:8080仅适用于宿主机访问容器的场景。当两个容器同属一个Docker网络时，通过容器名直接通信需使用容器内部暴露的端口，也就是8080，而非宿主机映射的33445，这是代理报错的主要原因。

2. 代理配置缺失必要参数

http-proxy-middleware默认不会修改请求头的Host字段，部分Node服务会因为Host不匹配拒绝请求，需要显式开启changeOrigin: true。另外你配置的路径匹配规则/api/*仅能匹配/api下的一级路径，建议修改为/api匹配所有以/api开头的请求，兼容性更强。

3. （后续获取httpOnly Cookie必备配置）

fetch请求默认不会携带、接收Cookie，需要在请求配置中新增credentials: 'include'参数。

修复后的配置示例 #

前端代理配置

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({ 
      target: "http://nodebackend:8080",
      changeOrigin: true
    })
  );
};

登录请求调整

const requestOptions = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email: "test@test.com", password: "test" }),
  credentials: 'include' // 允许携带、接收Cookie
};

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