配置Nginx解决前后端独立容器化后的通信问题

我开发的全栈Web应用（Vue3、Node、Express、Vite、Axios）采用前后端独立容器化部署。本地非容器化运行时，通过Vite配置的代理能正常实现前后端通信，但容器化部署后，前端输入无法传递到后端，怀疑是Nginx配置问题。我尝试修改vite.config.js中的target为容器服务名server，但问题仍未解决。

前端Axios请求代码 #

try {
  axios
  .post("/addItem", { title : currList.value, text : newData.value, done : false })
  .then((response) => {
    this.result = response.data.result;
  }, (error) => {
    throw error || new Error(`Request failed`);
  })
} catch(error:any) {
  console.error(error);
  alert(error.message);
}

Vite代理配置（vite.config.js） #

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
        proxy: {
            '/addItem': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                secure: false,
                ws: true,
            },
        },
    } 
})

后端接口代码（server.js） #

//add items to the todo list
app.post('/addItem', (req, res) => {
  //do stuff here
  res.status(200).json({ result: req.body.text });
})

当前Nginx配置 #

server {
    listen 80;

    server_name localhost;

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

    location /addItem {
        proxy_pass http://server:3000;
    }
}

排查与解决方案 #

1. 明确开发/生产环境配置边界 #

Vite的server.proxy仅作用于开发阶段，容器化部署的是生产构建后的前端代码，这个配置不会生效。不需要修改vite.config.js的target，重点调整Nginx和后端配置即可。

2. 修复Nginx代理配置 #

当前Nginx配置缺少必要的请求头传递，导致后端无法正确解析请求体。修改后的配置如下：

server {
    listen 80;
    server_name localhost;

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

    location /addItem {
        proxy_pass http://server:3000;
        # 传递核心请求头，确保后端识别请求来源与格式
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Content-Type application/json;
        # 解决POST请求体丢失问题
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }
}

3. 检查后端JSON解析中间件 #

后端Express必须配置express.json()中间件才能解析JSON格式的请求体，否则req.body会返回undefined。确保server.js中添加以下代码：

const express = require('express');
const app = express();
// 新增：解析JSON请求体
app.use(express.json());

//add items to the todo list
app.post('/addItem', (req, res) => {
  //do stuff here
  res.status(200).json({ result: req.body.text });
})

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

• 确保前端Nginx容器和后端Node容器在同一个Docker网络中，server服务名能被正确解析。可进入Nginx容器执行命令测试：

  curl http://server:3000/addItem -X POST -d '{"text":"test"}' -H "Content-Type: application/json"
  

• 若使用Docker Compose，确认服务名与Nginx配置中的server一致，且容器间网络未被隔离。

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