1. 安装axios: npminstall --save axios
2. 安装@nuxtjs/axios和@nuxtjs/proxy来处理axios跨域问题: npm i @nuxtjs/axios @nuxtjs/proxy -D
3. nuxt.config.js中配置:
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,
headers:{'Content-Type':'application/json','crossDomain':true},
timeout:5000,
},
proxy:{
'/api/':{
target:'http://192.168.1.53:3009/',
pathRewrite:{
'^/api/':''
}
}
}
4. 使用:
asynclogin({commit},{username,Pwd}){
try{
const{data}=awaitaxios.post('/API/User/Login',{username,Pwd})
console.log('apidata:',data)
commit('SET_USER',data)
}catch(error){
if(error.response&&error.response.status===401){
thrownewError('Badcredentials')
}
console.log(error)
throwerror
}
},
推荐阅读:
学习Web前端 自学宝典
【uni-app】uniapp项目优化方式及建议
前端跨域设置 withCredentials: true
如果觉得《nuxt.js 跨域配置proxy代理》对你有帮助,请点赞、收藏,并留下你的观点哦!