解决Vue前端请求后端解决接口跨域问题(开发环境下)
问题描述:在进行接口请求的时候跨域请求的错误。解决方法:1、修改config文件下的index.js里面的proxyTable属性:proxyTable: {'/api':{target:'http://bus.jt.sh.cn:8080',changeOrigin: true,pathRewrite:{'^/trafficline':''}}},说明:proxyT
·
问题描述:在进行接口请求的时候跨域请求的错误。
解决方法:
1、修改config文件下的index.js里面的proxyTable属性:
proxyTable: {
'/api':{
target:'http://xxx.xx.xx.xx:8080',
changeOrigin: true,
pathRewrite:{
'^/api':'/api'
}
}
},
说明:proxyTable里面的’/api’为目标请求接口的后的url名称
2、vue.config.js文件修改proxy属性:
proxy: {
// 匹配所有以 /api 开头的url
'/api': {
// 请求的目标主机
target: 'http://xxx.xx.xx.xx:8080',
changeOrigin: true,
ws: true
// 这样重写会把路径中 /api 消去
pathRewrite: {
'^/api': '/api'
}
}
}
3、简单的进行axios接口请求:
this.$http.get('/api/xxxxx?xxxx=1路&xxx=0926&xxxx=10',{
headers: {
'Content-type': 'application/json;charset=UTF-8'
/*'Content-Type': 'text/plain;charset=utf-8'*/
},
}).then(function (response) {
console.log(response,'response');
})
.catch(function (error) {
console.log(error);
});
进行上述修改后,接口跨域请求问题得到解决。
4、生产环境下的跨域问题一般由后端解决(安全性问题)
更多推荐
已为社区贡献15条内容
所有评论(0)