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中window.event事件用法详解
Dec 11 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
jquery中post方法用法实例
Oct 21 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
十天学会php之第八天
2006/10/09 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
测试php函数的方法
2013/11/13 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
javascript帧动画(实例讲解)
2017/09/02 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
基于wordpress的ajax写法详解
2018/01/02 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
python 实现插入排序算法
2012/06/05 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
采购部经理岗位职责
2014/02/10 职场文书
小学一年级评语大全
2014/04/22 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
vue ref如何获取子组件属性值
2022/03/31 Vue.js