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

• 2020 年 7 月 5 日
• 筆記
• NuxtJS, vue框架技術棧

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": "//localhost:3000"
  },
  /*
   ** Build configuration
   ** See //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
   ** //nuxtjs.org/guide/plugins
   */
  plugins: ["@/plugins/axios"],
}

使用 axios 插件

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

** 在 asyncData 里使用：**

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

** 在 asyncData 外使用：**

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

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