无法从远程浏览器加载的客户端应用调用API路由

问题根源 #

浏览器执行前端JavaScript代码时，127.0.0.1指代的是运行浏览器的本地机器，而非部署应用的服务器。所以远程访问时，Axios请求会被发向用户自己的电脑，而非服务器上的API服务，导致请求失败。

推荐方案：Express反向代理（符合通用性需求） #

既然客户端和API始终在同一机器上，用Express做反向代理是最优解——无需硬写服务器IP，Axios用相对路径即可，完全保持通用性。

步骤1：安装代理依赖

npm install http-proxy-middleware

步骤2：修改Express服务代码，添加代理配置

const express = require("express");
const cors = require("cors");
const { createProxyMiddleware } = require('http-proxy-middleware');

const path = __dirname + '/dist/';
const app = express();

// 托管Vue静态文件
app.use(express.static(path));

// 配置反向代理：将/api/route开头的请求转发到本地8081端口的API
app.use('/api/route', createProxyMiddleware({
  target: 'http://127.0.0.1:8081',
  changeOrigin: true,
}));

app.use(cors());

// 处理Vue路由的SPA fallback
app.get('*', function (req,res) {
  res.sendFile(path + "index.html");
});

const PORT = 8082;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});

步骤3：修改Axios的baseURL为相对路径

const api = axios.create({
  baseURL: '/api/route',
  headers: {
    'Content-Type': 'text/plain',
  },
});

配置完成后，所有客户端请求会先发送到Express的8082端口，再由服务器转发到同一机器的8081端口API，无论本地还是远程访问都能正常工作，且无需指定服务器IP，完全满足通用性要求。

备选方案：环境变量动态配置 #

如果不想用代理，可通过Vue环境变量动态注入API地址，但需要打包时根据部署环境调整，灵活性不如代理：

1. 在Vue项目根目录创建.env.production文件：

VUE_APP_API_BASE_URL=/api/route

2. 修改Axios配置：

const api = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  headers: {
    'Content-Type': 'text/plain',
  },
});

注意：这种方式仍需配合Express代理解决跨域问题，否则不同端口下会触发浏览器跨域限制。

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