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 form 验证函数 弹出对话框形式
Jun 23 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
从0开始的Python学习016异常
2019/04/08 Python
如何获取Python简单for循环索引
2019/11/21 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
Python 去除字符串中指定字符串
2020/03/05 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
利用python爬取有道词典的方法
2020/12/08 Python
关于Python错误重试方法总结
2021/01/03 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
青年志愿者活动总结
2014/04/26 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
校本课程教学计划
2015/01/19 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
八年级英语教学反思
2016/02/15 职场文书
Python Socket编程详解
2021/04/25 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS