Javascript 使用window.location.hostname时生成意外URL

我正在尝试附加URL，但生成的URL不是预期的。下面是我测试过的代码及其结果

因为我正在使用本地服务器测试我的系统，所以所需的请求URL是

http://127.0.0.1:8000/api/posts

。在不久的将来，我将把这个系统部署到一个远程服务器上，所以我不能像现在这样使用请求URL。基于下面的代码，我尝试获取当前主机名并将其附加到路由URL，但它会生成奇怪的URL。如何解决这个问题

组件

created() {
        var test = window.location.hostname + '/api/posts';
        this.axios.get(test).then(response => {
        this.posts = response.data.data;
    });

路由Api（Api.php）

---

您可能不需要设置baseURL。您是否尝试定义baseURL？例如：

axios.get(`${process.env.HOST}:${PORT}/api/categories`)

将此代码添加到：

/src/main.js

const baseURL = 'http://localhost:8080';
if (typeof baseURL !== 'undefined') {
  Vue.axios.defaults.baseURL = baseURL;
}

在这里看到解决方案了吗

---

我认为在你的应用程序中，baseURL设置为

http://127.0.0.1:8000

（默认）并将主机附加到此url中的这一行

var test=window.location.hostname+'/api/posts'。不用这个就试试。
您可能不需要设置baseURL。您是否尝试定义baseURL？例如：

axios.get(`${process.env.HOST}:${PORT}/api/categories`)

将此代码添加到：
/src/main.js

const baseURL = 'http://localhost:8080';
if (typeof baseURL !== 'undefined') {
  Vue.axios.defaults.baseURL = baseURL;
}

在这里看到解决方案了吗

我认为在你的应用程序中，baseURL设置为
http://127.0.0.1:8000
（默认）并将主机附加到此url中的这一行
var test=window.location.hostname+'/api/posts'。请不要使用此选项。如果不想配置基本URL，请在axios请求中使用绝对URL：

this.$axios.get('/apiposts')

其中前缀
/
是最重要的部分。
如果不想配置基本URL，只需在axios请求中使用绝对URL即可：

this.$axios.get('/apiposts')

前缀
/
是最重要的部分。
如果你只是在URL前面加上一个
正斜杠，axios很聪明，知道如何使用主机名。那么如何解决这个问题呢？但是如果我当前的URL是
foo/bar/
？这将创建
http://127.0.0.1:8000/foo/bar/api/posts
。如何制作
http://127.0.0.1:8000/api/posts
？不，不会。如果不使用
/
，则它将采用
相对路径。如果您确实使用了
/
，那么它将假定它是根路径。否。我说的是相对URL和绝对URL的区别。如果不使用
/
，则它是相对于当前URL的。所以如果你在
http://127.0.0.1:8000/foo/bar
你做了
这个.axios.get（'apiposts'）
那么你的URL就是
http://127.0.0.1:8000/foo/bar/apiposts
。但是如果您执行了
this.axios.get（'/apiposts'）
，那么它将是
http://127.0.0.1:8000/apiposts
。由于“AffixedI”的存在，如果您只是在URL前面加上一个
正斜杠，axios就足够聪明，知道如何使用主机名。那么如何解决这个问题呢？但是如果我当前的URL是
foo/bar/
？这将创建
http://127.0.0.1:8000/foo/bar/api/posts
。如何制作
http://127.0.0.1:8000/api/posts
？不，不会。如果不使用
/
，则它将采用
相对路径。如果您确实使用了
/
，那么它将假定它是根路径。否。我说的是相对URL和绝对URL的区别。如果不使用
/
，则它是相对于当前URL的。所以如果你在
http://127.0.0.1:8000/foo/bar
你做了
这个.axios.get（'apiposts'）
那么你的URL就是
http://127.0.0.1:8000/foo/bar/apiposts
。但是如果您执行了
this.axios.get（'/apiposts'）
，那么它将是
http://127.0.0.1:8000/apiposts
。因为`的原因`