Vue SPA请求Express服务报405错误及Nginx代理502问题求助

一、修正Express服务配置 #

你的Express服务缺少请求体解析中间件，且默认仅监听本地回环地址，可能导致Nginx无法访问。修改/root/server.js如下：

const express = require('express');

const app = express();
// 添加JSON请求体解析中间件，否则无法获取POST提交的数据
app.use(express.json());

app.post('/', (req, res) => {
    console.log('收到POST请求:', req.body);
    // 必须返回响应，避免客户端请求挂起
    res.status(200).json({ message: '请求已接收' });
});

app.get('/', (req, res) => {
    console.log('收到GET请求');
    res.status(200).send('Hello from Express');
});

// 监听0.0.0.0，允许Nginx等外部进程访问
const PORT = 5000;
app.listen(PORT, '0.0.0.0', () => {
    console.log(`服务已启动，监听端口 ${PORT}`);
});

重启Express服务：

node /root/server.js

二、修正Nginx配置 #

找到你的Nginx站点配置文件（通常在/etc/nginx/sites-available/或/etc/nginx/conf.d/目录下），修改为如下配置，实现静态文件由Nginx处理、POST请求代理到Express：

server {
    listen 443 ssl;
    server_name website.site;

    # 保留你已有的SSL证书配置
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # Vue SPA静态文件根目录
    root /var/www;
    index index.html;

    # 处理SPA路由，同时将非GET/HEAD请求代理到Express
    location / {
        try_files $uri $uri/ /index.html;
        # 仅把POST等非静态请求转发到Express的5000端口
        limit_except GET HEAD {
            proxy_pass http://127.0.0.1:5000;
            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 X-Forwarded-Proto $scheme;
        }
    }
}

# 可选：将HTTP请求强制重定向到HTTPS
server {
    listen 80;
    server_name website.site;
    return 301 https://$host$request_uri;
}

验证配置语法并重启Nginx：

nginx -t
systemctl restart nginx

三、调整客户端fetch请求 #

补全fetch代码的缺失部分，并添加Content-Type头，确保Express能正确解析请求体：

fetch("https://website.site", {
    method: "POST",
    headers: {
        'Content-Type': 'application/json' // 必须添加该头
    },
    body: JSON.stringify({
        name: this.state.name,
        surname: this.state.surname
    })
})
.then(response => response.json())
.then(data => console.log('服务端响应:', data))
.catch(error => console.error('请求失败:', error));

四、502错误排查（若仍出现） #

1. 确认Express服务正常运行：ps aux | grep node，确保server.js进程存在
2. 检查5000端口监听状态：netstat -tulpn | grep 5000，确认是node进程监听0.0.0.0:5000
3. 检查防火墙规则：确保允许本地进程访问5000端口（如ufw或iptables）
4. 替换proxy_pass域名：用127.0.0.1代替website.site，避免DNS解析问题

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