溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Nuxt使用axios如何進行跨域，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
Nuxt 是 Vue 項目服務器端渲染（SSR)解決方案。而在使用時，就會遇到前后端分離情況下的域名或端口不一致導致的跨域問題。本文將介紹如何通過設置代理解決 Nuxt 與 axios 集成的跨域問題。
undefined
解決跨域
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模塊。
附錄：nuxt使用axios的跨域處理配置
npm i axios qs npm i @nuxtjs/axios @nuxtjs/proxy --save-dev
plugins/axios.js
使用qs將請求從參數轉化位字符串
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 },
//開發模式下開啟debug
debug: process.env._ENV == "production" ? false : true,
//設置不同環境的請求地址
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做請求
看完了這篇文章，相信你對Nuxt使用axios如何進行跨域有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
