Nuxt使用axios跨域問題解決方法

Nuxt 是 Vue 項目伺服器端渲染（SSR)解決方案。而在使用時，就會遇到前後端分離情況下的功能變數名稱或埠不一致導致的跨域問題。本文將介紹如何通過設置代理解決 Nuxt 與 axios 集成的跨域問題。

解決跨域

Nuxt 使用 axios 為避免出現前端頁面跨域問題，需要安裝 @nuxtjs/axios 和 @nuxtjs/proxy 兩個模塊。

用 yarn 安裝：

yarn add axios @nuxtjs/axios @nuxtjs/proxy

使用 npm 安裝：

npm install axios @nuxtjs/axios @nuxtjs/proxy

註意：不需要手動註冊 @nuxtjs/proxy 模塊，但是必須要確保它在依賴項中。

安裝完成後在 nuxt.config.js 文件裡面添加以下配置：

module.exports = {
  /*
   ** Nuxt.js modules
   */
  modules: ["@nuxtjs/axios"],
  /*
   ** axios proxy
   */
  axios: {
    proxy: true
  },
  /*
   ** proxy
   */
  proxy: {
    "/api": "http://localhost:3000"
  },
  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {
    vendor: ["axios"]
  }
}

到此，代理設置完成，可以測試以下跨域問題是否解決。

擴展 axios

創建 nuxt 插件，更改全局配置全局配置自定義 axios，在 plugins/ 目錄下新建 axios.js 文件：

// plugins/axios.js
export default function({ $axios, redirect }) {

  $axios.onResponse(res => {
    return res.data
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status);
    if (code === 400) {
      redirect("/400");
    }
  });
}

在 nuxt.config.js 中配置 axios.js 插件：

module.exports = {
  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
  plugins: ["@/plugins/axios"],
}

使用 axios 插件

通過上面的設置後，使用 axios 插件需要註意的是在 asyncData 內和在 asyncData 外的使用是所不同的。

** 在 asyncData 里使用：**

async asyncData({ $axios }) {
  const ip = await $axios.get('http://icanhazip.com')
  return { ip }
}

** 在 asyncData 外使用：**

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

更多關於 Nuxt 與 axios 的集成介紹可以查看官方文檔——Axios模塊。