和后端联调时总是会面对恼人的跨域问题，最近基于Vue开发项目时也遇到了这个问题，两边各自想了一堆办法，查了一堆资料，加了一堆参数，最后还得我把自己的localhost映射成上线时将要使用的域名。
今天翻看代码时，突然发现vue-cli的config文件里有一个参数叫proxyTable，看这个名字就感觉能解决问题，于是我就去搜了一下，果然。在vuejs-templates，也就是vue-cli的使用的模板插件里，有关于API proxy的说明，使用的就是这个参数。
https://vuejs-templates.github.io/webpack/proxy.html
这个参数主要是一个地址映射表，你可以通过设置将复杂的url简化，例如我们要请求的地址是api.xxxxxxxx.com/list/1，可以按照如下设置：
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}
这样我们在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
那么又是如何解决跨域问题的呢？其实在上面的'list'的参数里有一个changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。增加的代码如下所示：
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': '/list'
}
}
}
vue-cli的这个设置来自于其使用的插件http-proxy-middleware
github：https://github.com/chimurai/http-proxy-middleware
深入了解的话可以看该插件配置说明，似乎还支持websocket，很强大的插件。
网友评论
proxyTable: {
'/mock':{
target: 'https://easy-mock.com',
changeOrigin: true,
secure: false //接受运行在https上的服务
}
}
home.vue:
this.$axios.get('/mock/5a27ff63817b456c2ecd0cc0/example/user')
.then((response)=>{
console.log(response)
})
.catch((error)=>{
console.log(error)
})
我用axios发布请求，但是代理失败，会请求到本地，请问是什么原因啊
您这里原话是 "这样我们在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1."
而官方文档写的是 "上面的示例将代理请求/api/posts/1到http://jsonplaceholder.typicode.com/posts/1。"
下面是官方文档地址(您文章提供的地址)
https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: {
'/AutomotiveTechnology': {
target: 'http://localhost:80',
changeOrigin: true,
pathRewrite: {
'^/AutomotiveTechnology': '/AutomotiveTechnology'
}
}
}
'/v2': {
target: 'https://api.douban.com/',
changeOrigin: true,
pathRewrite: {
'^/v2': ''
}
}
}
然后请求这样写得
axios.get('/v2/loc/list').then(function (response) {
console.log(response)
}
就是不生效，走过路过，谁知道的麻烦指点一下
commit('auction', res.body)
})
'/api': {
target: 'http://172.16.0.111',
changeOrigin: true,
pathRewrite: {
'/api': '/api'
}
}
'/list': {
target: 'http://api.xxxxxxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}有谁可以解答下，proxyTable对象中的各个属性的意思吗？如上 '/list'对象是什么意思，对象中target,changOrigin, pathRewrite各代表什么？
我的是这么写的
proxyTable: {
'/notes':{
target: 'http://www.jianshu.com/notes',
changeOrigin: true,
pathRewrite: {
'^/notes': '/notes'
}
}
},
created:function(){
this.$http.get('/notes/4749551/side_tool').then((response)=>{
console.log(response,'111');
})
}
现在是报404,，然后我把target中的/notes去掉就正常了，但是我不知道为什么是这样？
我的理解是第一个/notes代表的不是代表target中的值？这是实际访问的地址http://www.jianshu.com/note/4749551/side_tool，那么/notes代表的是http://www.jianshu.com,那么访问的时候不是改写成/note/note/4749551/side_tool?但是现在反而是写成/note/4749551/side_tool是对的，但是这样写的话，不是少了一个notes吗？
pathRewrite这个属性 中的 ‘^/notes’ 代表的一个正则表达式，也就是说以/notes开始的位置会重写一个/notes， 要是 target 属性为 'http://www.jianshu.com/notes' 而请求路径为'/notes/4749551/side_tool' 这样的话实际请求地址为http://www.jianshu.com/notes/notes/4749551/side_tool
//拦截一切/api的请求，后台代理获取数据，返回到前端
var proxyTable = {
'/api': {
target: 'http://112.74.127.99:5000/api/index',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
};
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(context, options))
})
我这么写的为什么会有cart.js:6 Uncaught ReferenceError: require is not defined这种错误
解决了困扰我一天一夜的问题
``` javascript
const DEBUG_MODE = true
const URL_PREFIX = DEBUG_MODE ? ' ' : ' http://xxx.com'
```
开发环境下前缀为空，生产环境下为你需要的域。然后请求的时候拼接字符串
``` javascript
`${URL_PREFIX}/api/xxx`
```
就可以了。
proxyTable: {
'/movie': {
target: 'https://api.douban.com/v2/',
changeOrigin: true,
pathRewrite: {
'^movie': '/movie'
}
}
还是不能请求到数据，这是为什么，求解答？