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 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
Angular网络请求的封装方法
May 22 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php+javascript的日历控件
2009/11/19 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
Python中字符串对齐方法介绍
2015/05/21 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
Python continue语句实例用法
2020/02/06 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Python实现弹球小游戏
2020/08/01 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
结婚喜宴主持词
2014/03/14 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
画展观后感
2015/06/17 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python