部署在Nginx的Vue应用调用API始终指向localhost问题求助

核心原因分析 #

最可能的情况是前端代码未重新构建部署，或者客户端浏览器缓存了旧代码。Vue是单页应用，代码打包后部署在Nginx，运行在用户浏览器中——如果修改API地址后没重新打包替换Nginx上的静态文件，浏览器加载的还是旧代码，自然会继续调用localhost。

具体解决步骤 #

1. 重新构建并部署Vue应用 #

• 确认本地Vue项目中API地址已修改为http://10.20.55.17:5025/Home/CallOthers
• 执行构建命令：

  npm run build
  

• 将构建生成的dist（或wwwroot）目录下的所有文件，替换到Nginx服务器的/var/www/parts5/wwwroot目录中
• 重启Nginx服务生效：

  sudo systemctl restart nginx
  

2. 清除客户端浏览器缓存 #

其他电脑访问时，按下Ctrl + Shift + R强制刷新页面，或者在浏览器设置中清除缓存，确保加载最新的前端代码。

3. 优化Nginx配置（可选，推荐） #

无需在前端硬编码API地址，通过Nginx反向代理统一处理请求，避免IP硬编码问题：

• 修改Vue代码中的API调用为相对路径：

  const response = await axios.get('/home/CallOthers');
  

• 你当前的Nginxlocation /home配置已正确代理到API服务器，前端请求会通过Nginx转发，既无需暴露API的IP，还能避免跨域问题。

4. 验证API服务器的可访问性 #

从其他电脑直接访问API地址：http://10.20.55.17:5025/Home/CallOthers，确认能正常返回数据，排除API服务器本身的问题。

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