最近接收一个前后端分离的项目，本地环境启动之后总是报跨域问题：
image.png
经过一番费劲心思的排查，发现是浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同，proxyTable通过代理可以解决这个问题。
在config目录下的index.js设置
dev: {
...
proxyTable: {
'/api': { // 这里的/api表示前端项目的根目录
target: 'http://localhost:8081', // 目标接口域名
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '/api' // 重写接口，将以/api开头的前端请求如：localhost:3000/api/xxx
//改成后端请求，如后端端口为8081，则为localhost:8081/api/xxx
}
}
}
...
}
上方配置的目的就是将前端请求localhost:3000/api/xxx 代理为localhost:8081/api/xxx
网友评论