Vue项目前后端联调(使用proxyTable实现跨域方式)
vue本地项目调试线上接口出现跨域问题
使用方法：vue在配置文件中提供了proxyTable来设置跨域，在config文件夹的index.js文件中
dev:{//开发环境下
//静态资源文件夹
assetsSubDirectory:'static',
//发布路径
assetsPublicPath:'/',
//代理配置表，在这里可以配置特定的请求代理到对应的API接口
//例如将'localhost:8080/api/xxx'代理到'http://xxxxxxx.com/xxx'
proxyTable:{
'/api':{
target:'http://xxxxxx.com',//接口的域名
//secure:false,//如果是https接口，需要配置这个参数
changeOrigin:true,//如果接口跨域，需要进行这个参数配置
pathRewrite:{
'^/api':'',//这种接口配置出来http://xxxxxx.com:8080/xxx
}
}
}
}
关于pathRewrite中'^/api'的作用：
用代理,首先你得有一个标识,告诉他你这个连接要用代理.不然的话,可能你的html,css,js这些静态资源都跑去代理.所以我们只要接口用代理,静态文件用本地。
'/api':{},就是告诉node,我接口只要是'/api'开头的才用代理.所以你的接口就要这么写/api/xx/xx.最后代理的路径就是http://xxxxxx.com/api/xx/xx.
可是不对啊,我正确的接口路径里面没有/api啊.所以就需要pathRewrite,用''^/api'':'',把'/api'去掉,这样既能有正确标识,又能在请求接口的时候去掉api
补充知识：vue2./vue.3.x实现跨域(proxytable/proxy)
vue2.x
config/index.js
proxyTable:{
'/api':{
target:'http://localhost:3000/',//请求的接口的域名
//secure:false,//如果是https接口，需要配置这个参数
changeOrigin:true,//如果接口跨域，需要进行这个参数配置
pathRewrite:{
'^/api':''
}
}
},
vue3.x
vue.config.js
module.exports={
devServer:{
proxy:{
'/api':{
target:'http://localhost:8080/',
changeOrigin:true,
ws:true,
pathRewrite:{
'^/api':'/static/mock'
}
}
}
}
}
以上这篇Vue项目前后端联调(使用proxyTable实现跨域方式)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。