Vue proxy 配置代理

直接先上代码:网上的代码都是一样的

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没有带上 不过后来觉得 浏览器的预请求应该是不会带上自定义请求头的吧。
纯属记录,如果错误,请指正!入行不到一年的菜鸟实习生。

你可能感兴趣的:(Vue proxy 配置代理)