Nuxt如何配置Axios同域名不同端口的动态baseURL

解决方案 #

有两种常用方案可以实现你的需求，都可以完美适配多设备开发测试场景：

方案1：客户端动态拼接baseURL #

利用客户端可以获取当前页面域名的特性，在Axios插件里动态修改开发环境的请求地址：

1. 在plugins目录下新建axios.js文件：

export default function ({ $axios, isDev }) {
  // 仅在客户端开发环境修改baseURL
  if (isDev && process.client) {
    const currentHost = window.location.hostname
    $axios.defaults.baseURL = `http://${currentHost}:8800/api/v1`
  }
}

2. 修改nuxt.config配置，注册插件并修改默认baseURL：

// 注册插件
plugins: [
  '~/plugins/axios'
],
axios: {
  // 生产环境直接用同源路径，开发环境由插件动态覆盖
  baseURL: '/api/v1'
},

方案2：使用Nuxt代理转发（更推荐） #

用Nuxt自带的代理能力，所有接口请求走前端服务转发，无需修改后端CORS配置，适配性更强：

1. 先安装代理依赖：
   npm i @nuxtjs/proxy
2. 修改nuxt.config配置：

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/proxy'
],
axios: {
  baseURL: '/api/v1',
  proxy: isDev // 仅开发环境开启代理
},
proxy: {
  '/api': {
    // 代理由Nuxt服务端发起，直接写本地后端地址即可，客户端无需感知
    target: 'http://localhost:8800',
    changeOrigin: true
  }
},

这种场景下，不管你用什么设备访问前端页面，所有接口请求都会自动走当前前端服务的代理转发到后端，不会出现请求localhost的问题。

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