关于Angular2 + node接口调试的解决方案


Posted in Javascript onMay 28, 2017

事情的起因

由于最近在使用Angular + node开发,采取的办法一直都是约定好接口,然后node实现,再编写前端。但是这样有一个很麻烦的问题:编写前端的时候无法调用接口,不能很好地测试,只能一口气写完再编译后放到后端来测试。

经常会因为解决一些小的问题而反复的编译、调试,浪费很多不必要的时间。

解决方案

偶然发现webpack-dev-server可以实现代理请求(把指定的url规则转发到其他地址),所以就试了一下。由于项目使用了Angular-cli构建,并没有webpack配置文件,悲伤。于是又去google上搜索了一圈Angular-cli,找到了Angular-cli实现代理的解决方案。

在项目目录下创建文件proxy.conf.json:

{
 "/api": {

  "target": "http://localhost:3000",

  "secure": false
 }
}

 1、/api为代理规则,因为我接口都是以api开头的,大家可以根据自己的实际情况设置

 2、target为目标服务地址,比如一个get请求的地址为http://localhost:4200/api/cards/all会被代理为

       http://localhost:3000/api/cards/all

       secure为是否开启ssl验证,在这里设置为false

接下来只需要启动node服务,再使用ng serve --proxy-config proxy.conf.json来启动自己的Angular项目就可以完美实现代理了,简直不要太好用,以前的方法简直是蠢爆了!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家三水点靠木的支持。

Javascript 相关文章推荐
jQuery 表单验证扩展(三)
Oct 20 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
JavaScript中立即执行函数实例详解
Nov 04 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
vue实现简单学生信息管理
May 30 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 #Javascript
设置cookie指定时间失效(实例代码)
May 28 #Javascript
Mac系统下Webstorm快捷键整理大全
May 28 #Javascript
获取url中用&隔开的参数实例(分享)
May 28 #Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 #Javascript
js每隔两秒输出数组中的一项(实例)
May 28 #Javascript
javascript 封装Date日期类实例详解
May 28 #Javascript
You might like
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python切换pip安装源的方法详解
2016/11/18 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python监控nginx端口和进程状态
2019/09/06 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
应聘医药销售自荐书范文
2014/02/08 职场文书
工程管理英文求职信
2014/03/18 职场文书
实习护士自荐信
2014/06/21 职场文书
个人收入证明模板
2014/09/18 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python