Nuxt解决前后端跨域问题
Nuxt 是 Vue 项目服务器渲染(SSR)解决方案。而在使用时,就会遇到前后端分离的情况下域名或端口不一致导致的跨域问题。本篇文章将完整呈现如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。扩展 axiosNuxt 使用 axios 为避免出现前端页面跨域问题,需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。用 yarn 安装yarn add ax
·
Nuxt 是 Vue 项目服务器渲染(SSR)解决方案。而在使用时,就会遇到前后端分离的情况下域名或端口不一致导致的跨域问题。
本篇文章将完整呈现如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。
扩展 axios
Nuxt 使用 axios 为避免出现前端页面跨域问题,需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。
用 yarn 安装
yarn add axios @nuxtjs/axios @nuxtjs/proxy
使用 npm 安装
npm install axios @nuxtjs/axios @nuxtjs/proxy
注意:不需要手动注册 @nuxtjs/axios 模块,但是必须要确保它在依赖项中。
安装完成后,更改全局配置自定义 axios,在 plugins 目录(如果没有 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 文件里面添加以下配置:
export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'@/plugins/axios.js'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
proxy: true,
prefix: '/api/',
credential: true
},
proxy: {
'/api/': {
target: 'http://localhost:8080/', // 目标服务器ip
pathRewrite: {
'^/api/': '/', // 把 /api 替换成 /
changeOrigin: true // 是否跨域
}
}
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
vendor: ["axios"]
}
}
执行 axios
在代码中使用 this.$axios 即可,'/person/getByConditions' 是后台控制器中自定义的路径
query() {
this.$axios.get('/person/getByConditions', {
params: {}
}).then((res) => {
this.records = res
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)