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

【问题标题】：Unexpected URL generated while using window.location.hostname使用 window.location.hostname 时生成了意外的 URL
【发布时间】：2019-06-09 05:54:25
【问题描述】：

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

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

【问题讨论】：

如果你只是在你的 URL 前加上 forward slash，那么 axios 就足够聪明，知道无论如何都要使用主机名。
那么怎么解决呢？
但是如果我当前的 url 是 foo/bar/ 怎么办？这将创建http://127.0.0.1:8000/foo/bar/api/posts。如何制作http://127.0.0.1:8000/api/posts？
不，不会。如果您不使用/，那么它将假定relative 路径。如果您确实使用/，那么它将假定它是根路径。
没有。我说的是相对 URL 和绝对 URL 之间的区别。如果您不使用/，则它与当前 URL 相关。所以如果你在http://127.0.0.1:8000/foo/bar 并且你做了this.axios.get('apiposts') 那么你的URL 就是http://127.0.0.1:8000/foo/bar/apiposts。但是如果你做了this.axios.get('/apiposts')，那么它就是http://127.0.0.1:8000/apiposts。因为`贴

标签： javascript laravel vue.js

【解决方案1】：

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

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

前缀/是重要部分。

【讨论】：

【解决方案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（默认），并且您将主机附加到此行中的此 URL var test = window.location.hostname + '/api/posts';。不用这个试试看。

【讨论】：