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

Skuld_yi發表於2021-08-16
前端UXJSiOS

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

相關文章