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模塊，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/45586.html
標籤：JavaScript
上一篇：使用Electron開發桌面應用