AWS EC2 Ubuntu20.04下Nginx代理Vue无法连接NodeJS接口404问题求助

1. 优先排查Nginx配置低级错误 #

你当前写的配置编辑路径是sudo nano /etc/nginx/sites-availabe/default，这里大概率存在拼写错误：正确路径是sites-available，少了一个字母l。如果确实是往拼写错误的路径写入了配置，那Nginx实际加载的默认配置根本没有被修改，自然/api路径的代理规则不生效。
如果确认路径拼写无误，接下来检查代理路径的斜杠规则：你当前配置的location /api/匹配请求后，会把完整的/api/xxx路径原样转发到后端，比如前端请求/api/user/login，实际转发到NodeJS服务的地址是http://{{my-ip}}:3002/api/user/login，但你的后端接口实际路径是/user/login没有/api前缀，自然返回404。
修复方案：把proxy_pass末尾添加斜杠，修改配置如下：

location /api/ {
    proxy_pass http://{{my-ip}}:3002/; # 末尾加斜杠会自动去掉匹配到的/api前缀再转发
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

修改完成后执行sudo nginx -s reload重载配置即可生效。

2. 排查前端baseURL配置问题 #

你提到修改baseURL为http://localhost:3002无法正常请求，需要注意：如果前端已经打包部署到服务器，用户通过公网访问前端时，localhost指向的是用户自己的本地设备，不是你的云服务器，自然请求不到后端接口。如果是本地开发环境调试，需要确认Express服务已经配置跨域规则，否则浏览器会触发跨域拦截，表现为请求失败。
临时测试跨域可以安装CORS中间件：

npm install cors

之后在Express的app.js中引入启用：

const cors = require('cors')
app.use(cors())

3. 排查云服务商安全组规则 #

你使用的是AWS服务器，需要确认AWS安全组的入站规则已经开放80端口（HTTP）和3002端口的访问权限，源地址可设置为0.0.0.0/0（测试阶段）或者你自己的公网IP。如果安全组没有开放对应端口，外网无法访问服务。

4. 验证代理是否生效 #

在服务器本地执行curl命令测试Nginx代理是否正常：

curl -d '{"email":"adriel@admin.com","password":"{{mypass}}"}' -H 'Content-Type: application/json' http://127.0.0.1/api/user/login

如果该请求能正常返回token，说明Nginx代理配置无误，问题出在前端代码或者跨域配置上；如果仍然返回404，可以查看Nginx错误日志定位具体原因，日志默认路径为/var/log/nginx/error.log。

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