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 相关文章推荐
JavaScript 学习点滴记录
Apr 24 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
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
PHP 简单数组排序实现代码
2009/08/05 PHP
php ci框架验证码实例分析
2013/06/26 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
PHP实现计算器小功能
2020/08/28 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
简述JS控制台的使用
2018/07/15 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
python决策树之CART分类回归树详解
2017/12/20 Python
深入了解Django中间件及其方法
2019/07/26 Python
python每天定时运行某程序代码
2019/08/16 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
求职简历推荐信范文
2013/12/02 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
档案检查欢迎词
2014/01/13 职场文书
导师工作推荐信
2015/03/27 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
Java 数组的使用
2022/05/11 Java/Android