前端 | Nuxt.js axios baseURL，proxy 代理

平时用 Vue 写前端时，对于 axios 请求的常规操作一般是

• 统一定义好一个 axios 对象，使用 axios.defaults.baseURL 设置 baseURL
  • 也不是不能直接把服务器地址定义在这，但经常会导致跨域问题，所以一般还是用一个统一的标识，例如 /backend 或 /api
• 在 vue.config.js 中定义代理 proxy

最近的项目中使用了 Nuxt.js 框架，发现相关功能的用法有些不同，于是做了一些整理。

nuxtjs/axios

Nuxt.js 自己封装了 axios 模块：@nuxtjs/axios。先在配置文件中引入模块：

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/axios',
  ],
}

引入后在 script 中（method, mounted等等）就能从全局访问到，用法和普通 axios 一致。

methods: {
  async fetchSomething() {
    const ip = await this.$axios.$get('http://icanhazip.com')
    this.ip = ip
  }
}

baseUrl 直接在配置文件中配置：

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: 'http://localhost:8080',
  },
}

nuxtjs/proxy

用 axios 直接向后端请求经常会发生 CORS 跨域问题，因此通常会使用代理。nuxt 中通过模块 @nuxtjs/proxy 处理代理。添加依赖后就可以在配置中开启 axios 的代理选项：

{
  modules: [
    '@nuxtjs/axios',
    //'@nuxtjs/proxy' 只要添加了依赖也可以不手动引入模块
  ],
  axios: {
    proxy: true
  },
}

开启代理选项后，baseURL 选项就会失效。如果依然希望在每个请求之前添加固定前缀可以使用 prefix 选项替代。nuxtjs/proxy 的配置方法与 Vue 中普通的代理写法基本一致。

{
  axios: {
    proxy: true,
    prefix: '/backend',
  },
  proxy: {
    '/backend': {
      target: 'http://localhost:8080', // process.env.BACKEND_URL
      pathRewrite: { '^/backend': '/' },
    },
  },
}

参考资料：@nuxtjs/axios 文档