极乐门资源网 Design By www.ioogu.com
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模块。
附录: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" "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做请求
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无解决Nuxt使用axios跨域问题的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]