vue开发过程中跨域最简单解决方案
2023-09-27 14:28:57 时间
前言:我们在进行一个项目开发工程中,需要从后端工程师那里获取数据库中的数据。然而前端代码和后端代码在未打包前是分离的,这就引入了一个“跨域取数据”的问题。
下面,我们就简单说下,利用vue脚手架生成的项目,在开发过程中怎么解决此问题。
第一步
找到并打开config文件夹下的index.js,做如下配置proxyTable:
proxyTable: {
'/api': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
//说明配置中的target后面内容为后端人员提供的数据接口。
//原理就是类似vpn做了一个中转,Node替你去接口请求数据而已
第二步
//调用
this.$http.get('/api/login').then(function(data){
console.log(data)
})
如果不是用Vue脚手架生成的项目怎么办呢?
引入插件http-proxy-middleware
github:https://github.com/chimurai/http-proxy-middleware
深入了解的话可以看该插件配置说明,似乎还支持websocket,很强大的插件。
作者:datura_lj
链接:http://www.jianshu.com/p/16f05ae4ca0f
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- vue-elementui 图片上传踩坑 前端转base64 自动补齐白块 固定像素
- 运行vs开发的vue.js项目
- Vue中 TodoList 示例: 浏览器本地存储、自定义事件、全局数据总线
- 记录vue和js操作——尽管很快实现了功能,可总感觉到不爽
- 精品微信小程序ssm的校园顺路代送网站|跑腿+后台前后分离VUE
- 【完美解决】vue,页面跳转样式错位但是刷新又好了的情况
- vue/cli的配置详解
- vue结合elementUI折叠展开效果动画
- Vue.js:侦听器笔记
- vue-cli 本地环境 API 代理设置和解决跨域
- vue项目js实现图片放大镜功能
- Laravel+vue实现history模式URL可行方案
- 【Vue全家桶】模板语法
- 前端面试---Vue部分考点梳理
- React和Vue特性和书写差异
- Vue 数据响应式原理
- Vue 2.0 华丽的音乐搜索播放 Demo
- vue——请求跨域时,vcli2/vcli3设置代理
- vue @scroll