对于前端开发人员来讲, 当你在开发环境中与后台开发人员进行数据联调时, 总会遇到烦人的跨域问题!
解决跨域的方法有很多种, 比如你和后台人员经过友好协商后, 你可以通过 JSONP 的方式或者让后台人员将代码设置为允许你进行跨域! 但是往往前后台开发人员的配合默契度是不太高的. 如果后台只给你接口, 并明确告诉你不允许修改接口, 怎么办? 怎么办才能实现跨域? 此时你就可以通过 proxyTable 来解决跨域问题!
通过 proxyTable 解决跨域在 vue-cli 当中是很简单的. 只需修改 config 文件夹下的 index.js 中的 proxyTable 就能实现:
- // 代理配置表, 在这里可以配置特定的请求代理到对应的 API 接口
- proxyTable:{
- "/api":{
- target:"http://www.zhangpeiyue.com",// 访问的服务器地址
- changeOrigin:true,//true 为开启代理
- }
- }
以上代码的 "/api" 你可以认为用于代替 target 里面的地址, 调取接口的地址直接用 api 来替换.
比如接口地址为:"http://www.zhangpeiyue.com/user/login".
你可以直接写为:"/api/user/login" 即可.
当然, 如果你感觉每次调用接口都要加上 "/api" 不舒服的话, 你也可以通过 pathRewrite 属性来对地址进行重写. 以上代码更改为:
- // 代理配置表, 在这里可以配置特定的请求代理到对应的 API 接口
- proxyTable:{
- "/api":{
- target:"http://www.zhangpeiyue.com",// 访问的服务器地址
- changeOrigin:true,//true 为开启代理
- //secure: true, // 如果是 https 接口, 需要配置这个参数
- pathRewrite:{
- '^/api': '/haha'// 路径的替换规则
- /*
- * 这里的配置是正则表达式, 以 / api 开头的将会被用用'/haha'替换掉
- * 假如后台文档的接口是 "http://www.zhangpeiyue.com/user/add"
- * 未处理之前前端 API 接口写: axios.get('/api/user/add')
- * 被处理之后前端 API 接口写: axios.get('/haha/user/add')
- */
- }
- }
- }
如果不想在前端 API 接口调用时出现 "/api", 你可以将路径的正则设为 '^/api': '/' 或 '^/api': ''
注意:
配置修改完以后一定要重新 npm run dev 一次
补充:
changeOrigin 的属性值为一个布尔值, 如果设置为 true, 那么本地会虚拟一个 NODE 服务端接收你的请求并代你发送该请求 (中间件). 因为服务端语言是没有跨域问题的, 所以这样最终就解决了跨域问题了. 不过这只适用于开发环境, 上线后可以使用反向代理 nginx.
来源: http://www.jianshu.com/p/aa28a9619701