Vue proxy 配置代理
2020-08-25 本文已影响0人
hello_web_Front
直接先上代码:网上的代码都是一样的
module.exports = {
lintOnSave: true,
devServer: {
proxy: {
"/api": {
/* 目标代理服务器地址 */
# 安全起见 隐藏我真实服务器地址
target: "http://118.*.*.*:*/api",
/* 允许跨域 */
ws: true,
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
}
};
上面代码的意思是将/api下的请求转发到我target下 也就是代理服务器地址。 所以在axios 以及页面中应该这么写
BASEURL = '/api'
// 封装的方法
export const getexpenseReportlist = (openid)=>{
return service.request({
url:"ExpenseReports/selectListByExpenseReports/"+openid,
method:'GET'
})
}
// 调用 这里openid是小程序端 这个不管他
const res = await getexpenseReportlist(this.openId);
至此 就成功了!打开network就会看到请求。我们实际的请求是
http://localhost:8080/api/ExpenseReports/selectListByExpenseReports/openId
查阅资料总结就是:代理服务器帮我去请求,然后我们请求的是我们本地 这样大家都是localhost就不存在跨域了。大概就是这么个意思。
然后在跨域之前每次浏览器都是发起一次预请求 由于是新手 当时很好奇为什么我的token没有带上 不过后来觉得 浏览器的预请求应该是不会带上自定义请求头的吧。
纯属记录,如果错误,请指正!入行不到一年的菜鸟实习生。