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

雨霖月寒發表於2020-07-05
UXiOS跨域

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模組。

相關文章