关于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
}
}
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项目就可以完美实现代理了，简直不要太好用，以前的方法简直是蠢爆了！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家脚本之家的支持。
相关文章
这篇文章主要给大家介绍了关于angular引入ng-zorro的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了AngularJS路由用法,简单分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以参考下2017-05-05
浅析angularJS中的ui-router和ng-grid模块
下面小编就为大家带来一篇浅析angularJS中的ui-router和ng-grid模块。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要给大家介绍了关于Angular4学习教程之HTML属性绑定的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
横向商品栏,把原有的滚动条改成自定义的样式,并且给两边加上箭头可以调整,可以拖动商品和滚轮实现滚动条效果,这篇文章主要介绍了angularjs 指令实现自定义滚动条效果,需要的朋友可以参考下2024-03-03
AngularJS和django的模板都是用{{}}来引用变量的，这就导致了冲突，所以这篇文章主要就给大家介绍了如何解决Angular.Js与Django标签冲突的方案，有需要的朋友们可以参考借鉴，下面来一起学习学习吧。2016-12-12
ng-events类似ionic中Events的angular全局事件
这篇文章主要介绍了ng-events类似ionic中Events的angular全局事件,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
本篇文章主要介绍了Angular 5.x 学习笔记之Router(路由)应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
Angular.js组件之input mask对input输入进行格式化详解
这篇文章主要给大家介绍了关于Angular.js组件之input mask对input输入进行格式化的相关内容，文中通过示例代码详细介绍了将银行卡号和日期的方法，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-07-07
这篇文章主要介绍了AngularJs入门教程之环境搭建+创建应用的方法,较为详细的分析了AngularJS的功能、下载及应用创建方法,需要的朋友可以参考下2016-11-11
最新评论