我有一个服务器,其中有一个API运行在端口8081上,客户端Vue应用程序运行在8082上。
我的客户端应用程序使用Axios查询API,使用以下代码。
const api = axios.create({
baseURL: 'http://127.0.0.1:8081/api/route',
headers: {
'Content-Type': 'text/plain',
},
});
客户端由以下Express服务器提供服务:
const express = require("express");
const cors = require("cors");
const path = __dirname + '/dist/';
const app = express();
app.use(express.static(path));
app.use(cors());
app.get('*', function (req,res) {
res.sendFile(path + "index.html");
});
// set port, listen for requests
const PORT = 8082;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
如果我直接从服务器使用我的应用程序没有问题,查询会正确执行。
但如果我从远程浏览器加载应用程序,客户端将无法执行查询,而是尝试使用127.0.0.1远程浏览器的www.example.com,而不是服务器的www.example.com。
Error case with browser
将Axios设置为使用服务器的本地IP可以使事情正常工作,但应用程序需要是通用的,它应该只使用127.0.0.1,因为应用程序和API将始终位于同一台机器上。
1条答案
按热度按时间xwbd5t1u1#
我找到了解决方案,要使地址通用,我需要使用全局变量
window.location.hostname
包含运行Vue应用程序服务器的计算机的主机名。
现在,当我尝试从远程计算机发出请求时,我的浏览器正确地使用了机器主机名,而不是它自己的localhost。
这是新的Axios配置: