在开发过程中vuecli有自带的服务器,但是我们实际要去请求我们的数据接口时,服务器与服务器之间会产生了一个代理跨域问题,如何解决这个跨域问题呢?
webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择
这样 我们就需要修改自带服务的配置了,在config 中的index文件中,有一个proxyTable参数
参数如下:
proxyTable: {},
改写成下面样式:
proxyTable: {
'/list': {
target: 'http://xxxx.xxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}
这样我们在写url的时候,只用写成/list/a
就可以代表xxx.xxx.com/list/a
.
如果需要跨域那么需要加上参数changeOrigin:true
本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了
proxyTable: {
'/list': {
target: 'http://xxx.xxx.com',
changeOrigin:true,
pathRewrite: {
'^/list': '/'
}
}
},
eg:
proxyTable: {
'/goods/*'
:{
target:
'http://localhost:3000',
changeOrigin:
true,
pathRewrite: {
'^/goods'
:
'/goods'
}
},
'/users/*'
:{
target:
'http://localhost:3000',
changeOrigin:
true,
pathRewrite: {
'^/users'
:
'/users'
}
}
},