关于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 相关文章推荐
原创javascript小游戏实现代码
Aug 19 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
React实现评论的添加和删除
Oct 20 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获得当前的脚本网址
2007/12/10 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
修改vue+webpack run build的路径方法
2018/09/01 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
python绘制散点图并标记序号的方法
2018/12/11 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
详解Python绘图Turtle库
2019/10/12 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
python实现简单的五子棋游戏
2020/09/01 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
大课间活动实施方案
2014/03/06 职场文书
初三学生评语大全
2014/04/24 职场文书
C++程序员求职信
2014/05/07 职场文书
婚纱店策划方案
2014/05/22 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA