Vue项目跨域问题解决
本人目前接触的是基于vue-cli、elementUI的前端项目,在前后端联调时遇到过跨域问题。网上找答案,然后解决问题。这里分享一下我用的方法。
产生原因
跨域产生的原因就是浏览器基于同源策略对跨域访问进行了限制。浏览器限制跨域,但是服务端不限制,因此可以让本地服务端代理跨域访问。
proxyTable代理跨域
在vue的工程目录下的config文件夹中存放着配置文件,其中index.js中提供了proxyTable来设置跨域。
dev: { //开发环境下
// 静态资源文件夹
assetsSubDirectory: 'static',
// 发布路径
assetsPublicPath: '/',
// 代理配置表,在这里可以配置特定的请求代理到对应的API接口
// 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
proxyTable: {
'/api': {
target: 'http://xxxxxx.com', // 接口的域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {
'^/apis': '/api' //根据需要可以把 /api 设为 空来保证访问地址正确
}
}
}