解决Nuxt使用axios跨域问题
Nuxt是Vue项目服务器端渲染（SSR)解决方案。而在使用时，就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决Nuxt与axios集成的跨域问题。
解决跨域
Nuxt使用axios为避免出现前端页面跨域问题，需要安装@nuxtjs/axios和@nuxtjs/proxy两个模块。
用yarn安装：
yarnaddaxios@nuxtjs/axios@nuxtjs/proxy
使用npm安装：
npminstallaxios@nuxtjs/axios@nuxtjs/proxy
注意：不需要手动注册@nuxtjs/proxy模块，但是必须要确保它在依赖项中。
安装完成后在nuxt.config.js文件里面添加以下配置：
module.exports={
/*
**Nuxt.jsmodules
*/
modules:["@nuxtjs/axios"],
/*
**axiosproxy
*/
axios:{
proxy:true
},
/*
**proxy
*/
proxy:{
"/api":"http://localhost:3000"
},
/*
**Buildconfiguration
**Seehttps://nuxtjs.org/api/configuration-build/
*/
build:{
vendor:["axios"]
}
}
到此，代理设置完成，可以测试以下跨域问题是否解决。
扩展axios
创建nuxt插件，更改全局配置全局配置自定义axios，在plugins/目录下新建axios.js文件：
//plugins/axios.js
exportdefaultfunction({$axios,redirect}){
$axios.onResponse(res=>{
returnres.data
})
$axios.onError(error=>{
constcode=parseInt(error.response&&error.response.status);
if(code===400){
redirect("/400");
}
});
}
在nuxt.config.js中配置axios.js插件：
module.exports={
/*
**PluginstoloadbeforemountingtheApp
**https://nuxtjs.org/guide/plugins
*/
plugins:["@/plugins/axios"],
}
使用axios插件
通过上面的设置后，使用axios插件需要注意的是在asyncData内和在asyncData外的使用是所不同的。
**在asyncData里使用：**
asyncasyncData({$axios}){
constip=await$axios.get('http://icanhazip.com')
return{ip}
}
**在asyncData外使用：**
methods:{
asyncfetchSomething(){
constip=awaitthis.$axios.get('http://icanhazip.com')
this.ip=ip
}
}
更多关于Nuxt与axios的集成介绍可以查看官方文档——Axios模块。
附录：nuxt使用axios的跨域处理配置
npmiaxiosqs npmi@nuxtjs/axios@nuxtjs/proxy--save-dev
plugins/axios.js
使用qs将请求从参数转化位字符串
importqsfrom"qs";
exportdefaultfunction({$axios,redirect}){
$axios.onRequest(config=>{
config.data=qs.stringify(config.data,{
allowDots:true//OptionallowDotscanbeusedtoenabledotnotation
});
returnconfig;
});
$axios.onResponse(response=>{
returnPromise.resolve(response.data);
});
$axios.onError(error=>{
returnPromise.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跨域问题的文章就介绍到这了,更多相关Nuxt使用axios跨域内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！