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

Question

我正在尝试附加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;
    });

Route Api（api.php）

Route::get('/posts', 'PostController@index');

Answer 1

如果您不想配置基本URL，只需在axios请求中使用绝对URL：

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

前缀/是重要部分。

Answer 2

您可能不需要设置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;
}

在此处Set baseURL from .env in VueAxios

中查看解决方案

我认为在您的应用程序中，baseURL设置为http://127.0.0.1:8000（默认），并且您将主机附加到此行var test = window.location.hostname + '/api/posts';的此URL。没有这个就试试。