使用window.location.hostname生成URL异常问题求助

我在本地测试时，期望的请求URL是http://127.0.0.1:8000/api/posts，但要部署到远程服务器，不能硬编码URL。于是尝试用window.location.hostname拼接路由，结果生成的URL有问题，不知道怎么解决。

我的组件代码： #

Component 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');

别着急，我来帮你分析问题根源，再给你几个实用的解决办法：

问题出在哪？ #

你用window.location.hostname只能拿到纯域名/IP（比如本地的127.0.0.1，远程服务器的your-domain.com），但缺少了请求必须的协议（http/https）和端口号（本地的:8000）。这样拼接出来的URL会是127.0.0.1/api/posts，浏览器会把它当成相对路径解析，自然无法正确访问API接口。

解决方法 #

方法1：直接用window.location.origin（最简单）

window.location.origin会返回包含协议、域名、端口的完整基础前缀，比如本地环境的http://127.0.0.1:8000，生产环境的https://your-domain.com。修改组件代码如下：

Component created() {
  const apiUrl = `${window.location.origin}/api/posts`;
  this.axios.get(apiUrl).then(response => {
    this.posts = response.data.data;
  });
}

方法2：配置Axios全局基础URL（更优雅）

给Axios设置全局的baseURL，这样所有请求都会自动拼接这个前缀，不用每次手动拼接路径。在项目入口文件（比如main.js）里添加配置：

import axios from 'axios';

// 配置API基础路径
axios.defaults.baseURL = `${window.location.origin}/api`;

之后组件里的请求就可以简化成：

Component created() {
  this.axios.get('/posts').then(response => {
    this.posts = response.data.data;
  });
}

方法3：用环境变量区分配置（推荐生产环境）

如果你的项目有开发/生产等多环境区分，可以通过环境变量来配置不同的API地址，避免硬编码。比如：

• 在开发环境的.env.development文件中：

  VUE_APP_API_BASE_URL=http://127.0.0.1:8000/api
  

• 在生产环境的.env.production文件中：

  VUE_APP_API_BASE_URL=https://your-domain.com/api
  

然后在组件里读取环境变量：

Component created() {
  const apiUrl = `${process.env.VUE_APP_API_BASE_URL}/posts`;
  this.axios.get(apiUrl).then(response => {
    this.posts = response.data.data;
  });
}

这种方式更灵活，也更符合工程化的开发规范，还能避免在代码中直接依赖浏览器的window对象。

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