平時用 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 文件