Docker容器中React应用请求Strapi服务失败问题求助

核心原因是React代码运行在用户浏览器中，而非Docker的client容器内：

• Docker内部网络的服务名serverstrapi仅在容器集群内有效，浏览器无法通过本地DNS解析该域名，导致请求失败。
• 容器内ping serverstrapi能成功，是因为容器处于Docker内部网络；改用localhost:3001有效，是因为该端口映射到了宿主机，浏览器能直接访问宿主机端口。

方案1：React开发环境代理（推荐） #

利用React内置的代理功能，将前端API请求转发到Strapi容器：

1. 在React项目的package.json中添加代理配置：

"proxy": "http://serverstrapi:1337"

2. 修改前端请求代码为相对路径：

fetch('/api/auth/local/register/')

此时React开发服务器会自动将API请求转发到Strapi服务，既避开了跨域问题，也无需暴露Strapi的外部端口。

如果使用Vite等其他构建工具，需在vite.config.js中配置代理：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://serverstrapi:1337',
        changeOrigin: true,
      },
    },
  },
})

方案2：Nginx反向代理（生产环境推荐） #

通过Nginx统一处理前端静态资源和API请求，避免跨域且更安全：
修改Nginx配置文件（./nginx/default.conf）：

server {
    listen 80;

    # 转发前端页面请求到React容器
    location / {
        proxy_pass http://client:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 转发API请求到Strapi容器
    location /api/ {
        proxy_pass http://serverstrapi:1337/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

前端代码同样使用相对路径fetch('/api/auth/local/register/')，浏览器请求Nginx的80端口后，由Nginx转发到对应容器。

方案3：Strapi跨域配置（临时测试用） #

仅用于本地测试，不推荐生产环境：
修改Strapi项目的config/middlewares.js，配置CORS允许前端域名访问：

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      cors: {
        origin: ['http://localhost:8081'], // 前端外部访问地址
        methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
        headers: '*',
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

此时前端可直接使用fetch('http://localhost:3001/api/auth/local/register/')发起跨域请求。

• Docker Compose默认会为所有服务创建共享网络，容器间可通过服务名直接通信，无需额外配置网络。
• 生产环境优先选择Nginx反向代理方案，避免直接暴露后端服务端口，提升安全性。

内容的提问来源于stack exchange，提问作者Денис Беспалов