VueJs 将接口用webpack代理到本地的方法


Posted in Javascript onNovember 27, 2017

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

// 配置API接口地址

var root = 'https://cnodejs.org/api/v1'

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

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

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

配置 webpack 将接口代理到本地

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

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

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {},

 

// Various Dev Server settings

host: 'localhost', // can be overwritten by process.env.HOST

port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

 

// Use Eslint Loader?

// If true, your code will be linted during bundling and

// linting errors and warnings will be shown in the console.

useEslint: true,

// If true, eslint errors and warnings will also be shown in the error overlay

// in the browser.

showEslintErrorsInOverlay: false

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

proxyTable: {

  '/api/v1/**': {

    target: 'https://cnodejs.org', // 你接口的域名

    secure: false,

    changeOrigin: false,

  }

}

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

更多关于接口的配置请参见:https://github.com/chimurai/http-proxy-middleware#options

更多关于webpack 接口配置请参见:https://webpack.js.org/configuration/dev-server/#devserver-proxy

重新配置 src/api/index.js 文件

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

// 配置API接口地址

var root = '/api/v1'

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

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

cnpm run dev

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

VueJs 将接口用webpack代理到本地的方法

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

VueJs 将接口用webpack代理到本地的方法

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现更改表格行顺序示例
Apr 30 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
js实现全选和全不选
Jul 28 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
vue如何清除浏览器历史栈
May 25 Vue.js
vue-awesome-swiper滑块插件使用方法详解
Nov 27 #Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 #Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 #Javascript
在vue中实现简单页面逆传值的方法
Nov 27 #Javascript
浅析Vue自定义组件的v-model
Nov 26 #Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 #Javascript
Javacript中自定义的map.js  的方法
Nov 26 #Javascript
You might like
Destoon实现多表查询示例
2014/08/21 PHP
php输出图像的方法实例分析
2017/02/16 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
VUE中使用MUI方法
2019/02/12 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
手机被没收检讨书
2014/02/22 职场文书
企业宣传方案
2014/03/04 职场文书
奶茶店创业计划书
2014/08/14 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
公司感谢信范文
2015/01/22 职场文书
警示教育片观后感
2015/06/17 职场文书
2016十一国庆节感言
2015/12/09 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android