前后端分离开发时,有时候会遇到跨域的情况:只在开发的时候存在跨域,项目上线后,由于配置的域名相同,跨域就会不存在。
这个时候,有两种方案可以比较快的解决:
1、利用h5的特性,使用cors,在ngnix服务器上设置header:Access-Control-Allow-Origin的值为 *(或者目标域名)允许跨域。
2、在我们的本地开发服务器上设置代理。
这里主要介绍使用vue-cli创建项目后,怎样配置本地服务器的代理,成功通过本地服务器代理请求数据的解决方案。
解决方案
进入config/index.js中,在dev属性中添加proxyTable的设置。
假设我现在需要将我本地的http://localhost:8080/somepath
代理到目标地址http://a.b.com/otherpath
下,那么我就可以这样做:
module.exports= {
dev: {
proxyTable: {
'/somepath': {
target: 'http://a.b.com',
changeOrigin: true,
pathRewrite: {
'^/somepath': '/otherpath'
}
}
}
}
}
我的vue多页面系列的其他博客链接: