关于配置proxy代理配置

写在前面:
能成功跨域的前提是:本地跑项目的端口需要与后台接口允许跨域的端口一致(这一条简直是血泪的教训)

以vue + webpack跨域代理为例:
我本地(localhost想要请求的接口地址为https://baidu.com/bus/graph/b...

proxy: {
  '/build': {
    target: 'https://baidu.com/bus/graph',
    logLevel:'debug',//运行时将本地发起的地址和对应指向的地址打印输出
    changeOrigin: true,//允许跨域
  }
},

proxy的key值为:'/build',用来匹配你本地发起请求的地址,即本地的localhost:8080会被替换为target地址
如果你本地发起请求的地址为:localhost:8080/build 那代理访问的实际地址为:https://baidu.com/bus/graph/b...

然后你可以做如下修改:

proxy: {
  '/build': {
    target: 'https://baidu.com/bus/graph',
    logLevel:'debug',//运行时将本地发起的地址和对应指向的地址打印输出
    changeOrigin: true,//允许跨域
    pathRewrite:{//重写本地发起的路径
        '^/graph':""
    }
  }
},

如果你本地发起请求的地址为:localhost:8080/graph/build ,路径重写会将你发起地址的/graph/build==>/build,代理访问的实际地址为:https://baidu.com/bus/graph/b...

pathRiwrite更多在无法仅仅使用一个代理切路径有包含的时候比较适用

你可能感兴趣的:(vue.js,前端,代理)