写在前面:
能成功跨域的前提是:本地跑项目的端口需要与后台接口允许跨域的端口一致(这一条简直是血泪的教训)
以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更多在无法仅仅使用一个代理切路径有包含的时候比较适用
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。