如何在Axios中配置适配不同环境的动态主机地址？

针对你遇到的问题，我之前在使用Axios v0.16.x和Node.js v8.x的项目里也踩过类似的坑，分享几个可行的方案：

1. 利用构建工具注入环境变量（推荐） #

如果你的项目是用Webpack或者类似的构建工具打包的，可以通过DefinePlugin注入环境标识，然后在代码里动态设置baseURL，从根源上避免前端读取location带来的问题：

步骤1：在构建配置里添加环境变量 #

比如在Webpack的配置文件中：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ...其他配置项
  plugins: [
    new webpack.DefinePlugin({
      // 根据npm脚本传入的环境设置变量
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    })
  ]
};

然后在package.json里添加对应的启动/构建脚本：

{
  "scripts": {
    "dev": "NODE_ENV=development webpack-dev-server",
    "build": "NODE_ENV=production webpack"
  }
}

步骤2：在Axios配置中动态判断 #

import axios from 'axios';

// 根据环境设置不同的baseURL
let baseURL;
if (process.env.NODE_ENV === 'development') {
  baseURL = 'http://hastore.local'; // 开发环境专属地址
} else {
  baseURL = 'http://your-production-api-domain.com'; // 生产环境API地址，直接写固定域名即可
}

axios.defaults.baseURL = baseURL;

这种方式的优势是：环境变量在构建阶段就注入完成，生产环境打包后的代码里baseURL是固定的生产地址，完全不会出现端口错误或主机重复的问题。

2. 无构建工具时，根据当前域名特征判断 #

如果你的项目不需要构建，直接在浏览器运行，可以通过判断当前域名的特征来区分环境：

import axios from 'axios';

const currentHost = window.location.hostname;
let baseURL;

// 匹配开发环境域名
if (currentHost === 'hastore.local') {
  baseURL = 'http://hastore.local';
} else if (currentHost.includes('your-production-domain.com')) {
  // 生产环境如果API和前端域名一致，直接用当前host；不一致就写固定API域名
  baseURL = 'http://api.your-production-domain.com';
}

axios.defaults.baseURL = baseURL;

注意：生产环境尽量不要依赖location.host，直接写固定的API域名更稳妥，避免端口或子域名带来的意外问题。

3. 针对Axios v0.16.2的特殊注意点 #

因为你用的是比较老的Axios版本，要避开两个坑：

• 不要在请求拦截器里动态修改baseURL（v0.16.x的拦截器逻辑和新版本有差异，容易导致地址拼接错误）
• 如果是Node.js后端使用Axios，可以直接用自定义环境变量：

const axios = require('axios');
axios.defaults.baseURL = process.env.API_BASE_URL || 'http://hastore.local';

启动服务时传入环境变量即可：API_BASE_URL=http://production-api.com node app.js

这些方案我之前在类似环境下都用过，应该能解决你遇到的问题。

内容的提问来源于stack exchange，提问作者Dmitry S.