位置: 编程技术 - 正文

VueJs 将接口用webpack代理到本地的方法(给一个接口,然后怎么在vue里面调用)

编辑:rootadmin

推荐整理分享VueJs 将接口用webpack代理到本地的方法(给一个接口,然后怎么在vue里面调用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue怎么使用接口,vue的接口用什么写,vuejs怎么请求接口,vue的接口用什么写,给一个接口,然后怎么在vue里面调用,vue.js接口,vue.js接口,给一个接口,然后怎么在vue里面调用,内容如对您有帮助,希望把文章链接给更多的朋友!

上一篇博文,我们已经顺利的从cnodejs.org请求到了数据,但是大家可以注意到我们的/src/api/index.js的第一句就是:

这里我们的接口地址是写死的,这固然是一个问题,但是其实并不是最重要的,而是在cnodejs.org已经帮我们把接口处理的很好了,帮我们解决了跨域问题。而在实际开发中,很多项目接口是不允许我们跨域请求的。

而在第一章说到的前后端分离开发模式,前端开发前端,同时后端也在开发接口,那这个时候我们前端工程师不可能到服务器上直接开发,或者在本地搞一套服务器环境,如果是这样就违背了我们前后端分离开发的初衷。

那么如何解决这个问题呢?其实很简单,要知道 跨域不是接口的限制 而是浏览器为了保障数据安全做的限制。因此,一种方法可以解决,那就是打开浏览器的限制,让我们可以顺利的进行开发。但是无奈的是,最新的 chrome 浏览器好像已经关闭了这个选项,那么我们只能采用另外一种方法了——将接口代理到本地。

配置 webpack 将接口代理到本地

好在,vue-cli 脚手架工具,已经充分的考虑了这个问题,我们只要进行简单的设置,就可以实现我们的目的。

我们打开 /config/index.js 文件,找到以下代码:

VueJs 将接口用webpack代理到本地的方法(给一个接口,然后怎么在vue里面调用)

其中,proxyTable: {}, 这一行,就是给我们配置代理的。根据 cnodejs.org 的接口,我们把这里调整为:

我们这样配置好后,就可以将接口代理到本地了。

更多关于接口的配置请参见: 接口配置请参见: src/api/index.js 文件

在上面我们的代理已经配置好了,但是我们的/src/api/index.js还需要调用人家的地址,所以我们来重新配置/src/api/index.js文件,如下

跨域问题一般仅存在于开发环境上,到实际生产环境上一般不存在跨域问题了,所以采用这种方式来进行配置,能很好的解决跨域问题。值得注意的是,配置完代理后是不会立即生效的,需要重启服务器。

我们按Ctrl+c先停掉服务,然后再用cnpm run dev重启服务即可。

重启完成后,打开浏览器,在F开发者工具里,可以看到如下:

可以看到我们请求的接口地址已经变成了localhost也就是本机,说明我们的接口已经成功的代理到本地了。再切换到Priview选项卡来看一下数据是否正常返回:

如果出现上图,则说明数据也正常的返回了,这样我们已经顺利的将接口代理到了本地,并且读取到了数据。开始准备下面的工作吧!

标签: 给一个接口,然后怎么在vue里面调用

本文链接地址:https://www.jiuchutong.com/biancheng/378897.html 转载请保留说明!

上一篇:vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法(vue自定义组件v-html)

下一篇:Vue父子模版传值及组件传值的三种方法(vue父子组件传值props)

  • 小微企业公司章程范本
  • 中标服务费可否开发票
  • 公司工会的主要职能是
  • 委托外单位加工发出的材料分录
  • 案例分析两个分公司转资金怎么做账?
  • 个人所得税深圳税务
  • 简易征收企业所得税几个点
  • 固定资产注资后怎么做账
  • 企业所得税减免税额计算公式
  • 固定资产出租需要交什么税
  • windows10如何开启远程
  • 法人向公司借款要交什么税
  • Win11怎么设置屏幕熄灭时间
  • 预付款多长时间
  • 高新企业研发支出转产成品
  • 轻薄本拆卸
  • php调用图片
  • 进度条js代码
  • php 读取文本文件
  • visual studio code 调试php方法(图文详解)
  • axios提交文件
  • 从小规模纳税人购进农产品进项税怎么计算
  • thinkphp连接查询少数据
  • vscode搭建vue项目
  • 万字长文护国安是谁写的
  • chattra
  • 卷积拆分
  • 利润分配的顺序依次是什么
  • dict.setdefault()在python中设置默认值
  • 教育经费什么情况下可以报销
  • 经营一家淘宝店铺,自然就应该做好
  • 钢筋增值税专票几个点
  • 出口结汇有哪些常用方法?
  • 金蝶财务软件怎么备份
  • access分组计数
  • 无法连接配置的sql服务器
  • 专款专用需要缴税吗
  • 税金及附加需不需要计提
  • 什么情况下增值税计入成本
  • 印花税计税依据和税率
  • 研发费用账务处理一定在管理费用吗
  • 分配股利有几种形式
  • 来料加工账务处理案例
  • 现金流量表格式有几种
  • 银行收到货款会计分录怎么做
  • 什么是资产处置收益
  • 公司买东西算什么费用
  • win7系统怎么设置开机启动项
  • win10 0×0000007b怎么解决
  • centos bond mode
  • 误删了分区怎么恢复
  • win7电脑蓝牙图标怎么弄出来
  • win10预览版bug
  • vmware中安装centos7
  • win7系统在哪里看显卡
  • win7断电后无法正常启动
  • linux 内存文件夹
  • jquery.ui
  • 编辑器组件
  • opengl教程48讲
  • unity3d documentation
  • 着色器模型
  • linuxparted命令
  • 微信和qq时间格式不一样
  • javascript内存管理
  • 批处理脚本怎么写
  • node的express
  • Python使用QQ邮箱发送Email的方法实例
  • JavaScript中setFullYear()方法的使用详解
  • dom教学
  • python multinomial
  • js判断当前页面是否为空
  • jQuery插件ajaxfileupload.js实现上传文件
  • js 不用var
  • 浙江纳税百强2020
  • 云南省地方税务局关于城镇土地使用税
  • 分红太多
  • 金三系统企业所得税如何变更所得税缴纳方式?
  • 地税是什么税种
  • 小规模纳税人的认定标准是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设