Angular2 + node 接口调试解决方案

事情的起因

由于最近在使用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
    }
}
  • /api为代理规则,因为我接口都是以api开头的,大家可以根据自己的实际情况设置
  • 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项目就可以完美实现代理了,简直不要太好用,以前的方法简直是蠢爆了!


本文结束,感谢阅读!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,928评论 19 139
  • Angular CLI 是什么? Angular CLI 是一个命令行接口(Command Line Interf...
    semlinker阅读 9,681评论 0 39
  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 11,602评论 4 43
  • 夜深月黑风高,这个时候街面上已经冷冷静静行人寥寥无几;这条街道是这座城市最繁华的一角,因为这里有家最有名的娱乐城,...
    无名三少阅读 2,976评论 1 0
  • 大千世界,无奇不有——题记 不错,这个世界上有悲欢离合,有阴晴圆缺。共同的一个世界就是我们共同的一个家,多...
    Kiki星阅读 2,924评论 0 0

友情链接更多精彩内容