基于Node.js/Express的MEAN应用Nginx反向代理404及混合内容问题求助

核心404原因分析 #

当前Nginx配置中，location /soc/ 匹配请求路径后，proxy_pass http://ip:3000/ 会把请求路径里的 /soc/ 替换为 /——也就是说前端请求 https://mydomain/soc/transaction/ 会被转发到后端的 http://ip:3000/transaction/，但你的后端路由是 app.use('/soc/transaction', TransactionController)，后端只监听 /soc/transaction 路径，自然返回404。

两种可行修复方案 #

方案1：修改Nginx的proxy_pass配置 #

保留后端路由不变，调整Nginx的proxy_pass，让转发后的路径包含/soc：

location /soc/ {
    # 移除root和index配置，反向代理场景不需要这两个静态文件指令
    # root /capza_app/back/;
    # index index.js;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_set_header X-NginX-Proxy true;
    # 注意末尾不要加斜杠，保留/soc前缀转发到后端
    proxy_pass http://ip:3000/soc/;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_http_version 1.1;
    # 修正拼写错误：AccesControl -> Access-Control
    proxy_set_header Access-Control-Allow-Origin *;
}

修改后，前端请求https://mydomain/soc/transaction/会被转发到http://ip:3000/soc/transaction/，和后端路由完全匹配。

方案2：修改后端Express路由 #

保留Nginx配置不变，将后端路由的/soc/transaction改为/transaction：

// 原路由
// app.use('/soc/transaction', TransactionController);
// 修改后
app.use('/transaction', TransactionController);

这样Nginx转发过来的/transaction/就能直接匹配后端路由。

额外注意事项 #

1. 移除Nginx里的root和index：这两个是用于直接返回静态文件的指令，反向代理场景下留着可能引发路径冲突。
2. 修复CORS头拼写错误：原配置里的AccesControl-Allow-Origin是拼写错误，正确应为Access-Control-Allow-Origin，否则跨域头不生效。
3. 混合内容问题：用Nginx反向代理后，前端通过HTTPS发起请求，Nginx内部转发到后端HTTP，浏览器只会识别到HTTPS请求，混合内容问题会自动解决，无需额外处理。

修改完成后，重启Nginx（sudo systemctl restart nginx）和后端服务，再测试请求即可。

内容的提问来源于stack exchange，提问作者Mélanie Le Cleuziat