解決Nuxt使用axios跨域問題

更新時間：2020年07月06日 09:25:23 作者：雨霖月寒

這篇文章主要介紹了Nuxt使用axios跨域問題解決方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

Nuxt 是 Vue 項目服務(wù)器端渲染（SSR)解決方案。而在使用時，就會遇到前后端分離情況下的域名或端口不一致導致的跨域問題。本文將介紹如何通過設(shè)置代理解決 Nuxt 與 axios 集成的跨域問題。

解決跨域

Nuxt 使用 axios 為避免出現(xiàn)前端頁面跨域問題，需要安裝 @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"]
 }
}

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

擴展 axios

創(chuàng)建 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 插件

通過上面的設(shè)置后，使用 axios 插件需要注意的是在 asyncData 內(nèi)和在 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
 }
}

更多關(guān)于 Nuxt 與 axios 的集成介紹可以查看官方文檔——Axios模塊。

附錄：nuxt使用axios的跨域處理配置

npm i axios qs
npm i @nuxtjs/axios @nuxtjs/proxy --save-dev

plugins/axios.js

使用qs將請求從參數(shù)轉(zhuǎn)化位字符串

import qs from "qs";
 
export default function({ $axios, redirect }) {
 $axios.onRequest(config => {
  config.data = qs.stringify(config.data, {
   allowDots: true //Option allowDots can be used to enable dot notation
  });
  return config;
 });
 
 $axios.onResponse(response => {
  return Promise.resolve(response.data);
 });
 
 $axios.onError(error => {
  return Promise.reject(error);
 });
}

nuxt.config.js

 plugins: [
  { src: "~plugins/axios.js", ssr: true },
 ],
 //處理跨域問題
 modules: ["@nuxtjs/axios", "@nuxtjs/proxy"],
 axios: {
  retry: { retries: 3 },
  //開發(fā)模式下開啟debug
  debug: process.env._ENV == "production" ? false : true,
  //設(shè)置不同環(huán)境的請求地址
  baseURL:
   process.env._ENV == "production"
    ? "http://localhost:3000/api"
    : "http://localhost:3000/api",
  withCredentials: true,
 },
 proxy: {
  //開啟代理
  "/api/": {
   target: "http://192.168.1.2:10086/v1",
   pathRewrite: { "^/api/": "" }
  }
 }

在頁面使用使用this.$axios做請求

到此這篇關(guān)于解決Nuxt使用axios跨域問題的文章就介紹到這了,更多相關(guān)Nuxt使用axios跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: