关于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项目就可以完美实现代理了，简直不要太好用，以前的方法简直是蠢爆了！

总结

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

赞 (0)

相关推荐

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

    事情的起因 由于最近在使用Angular + node开发,采取的办法一直都是约定好接口,然后node实现,再编写前端.但是这样有一个很麻烦的问题:编写前端的时候无法调用接口,不能很好地测试,只能一口气写完再编译后放到后端来测试. 经常会因为解决一些小的问题而反复的编译.调试,浪费很多不必要的时间. 解决方案 偶然发现webpack-dev-server可以实现代理请求(把指定的url规则转发到其他地址),所以就试了一下.由于项目使用了Angular-cli构建,并没有webpack配置文件,悲

  • sublime text配置node.js调试(图文教程)

    sublime text配置node.js调试(图文教程)

    1. 首先到 nodejs.org 下载 Node.js 安装包并安装. 2. 打开 Sublime Text 2 编辑器.选择菜单 Tools --> Build System --> new Build System... 3. 将文件保存为 JavaScript.sublime-build 4. 文件内容为: { "cmd": ["node", "$file"], "file_regex": "^[

  • 使用ngrok+express解决本地环境中微信接口调试问题

    在微信项目的开发的时候,经常需要对微信jssdk提供的接口进行调试,比如说录音, 分享 ,上传图像等接口,但是微信jssdk要求绑定安全域名才能使用其提供的一系列功能 , 而在开发环境中使用localhost或者本地ip无法完成域名的认证和绑定, 所以无法在本地调试 .当然有一种迫不得已方法 ,就是在本地开发完 ,打包发到公司的测试服务器上 ,利用测试服务器认证后的域名进行调试,每次改动,调试都要发一遍测试,显然这种方法非常麻烦且很不科学,所以这篇文章就针对这个问题介绍一下如何利用ngrok和e

  • SpringBoot使用knife4j进行在线接口调试

    前言 我们在开发一个Java Web的项目,如果项目整体采用前后端分离的架构的方式,我们会经常使用Swagger来进行接口调试和为前端提供接口文档,但是Swagger并没有实际上那么方便,比如我们在发送Post请求时,参数选填还是非常不友好,那么有没有更好的工具呢? 正文 knife4j knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案,前身是swagger-bootstrap-ui,具有小巧,轻量,并且功能强悍的优点. Knife4j提供两大核心功能:文档说

  • angular2+node.js express打包部署的实战

    Angular2我自己还在摸索学习中,本文介绍了angular2+node.js express打包部署的实战,分享给大家,也给自己留个笔记 angular是客户端js,Node.js 是服务端JS,建立SPA 网站需要把这两者统一到一起. 1.angular2项目创建,使用angular-cli ng new mypos 2.使用express命令行工具创建express项目. express --view=hbs 3.angular2 中 需要引用到第三方库 例如 jQuery,bootst

  • Cisco路由器全局调试\接口调试\协议调试

    全局调试 在配置Cisco路由器时,全局和接口命令的界限是十分明显的.在这种情况下,我们使用"全局"来标识那些不能用于接口调试或者特定的传输介质类型和协议调试的命令.例如,在2500系列路由器中,就可以使用调试命令分析Cisco发现协议(Cisco Discovery Protocol,CDP).我们通过telnet远程登录到路由器.在缺省方式下,调试命令的输出被发送到控制台,如果处于telnet会话中,我们可以使用terminal monitor命令查看输出. 接口调试 debug

  • idea 无法debug调试的解决方案

    使用idea 调试模式运行项目是启动不了,本人亲自测试有效使用 报错信息如下 C:\tomcat路径\apache-tomcat-8.5.40\bin\catalina.bat run [2019-04-19 10:53:53,796] Artifact agro_examina: Waiting for server connection to start artifact deployment... Using CATALINA_BASE: "C:\Users\Administrator\.

  • Node.js调试技术总结分享

    Node.js调试技术总结分享

    前言 众所周知调试技术与开发技术构成了软件开发的基石.目前Nodejs作为新型的Web Server开发栈倍受开发者关注.总的来说Nodejs的应用程序主要有两部分:JavaScript编写的js模块和C语言编译的二进制模块. 这里主要介绍三种avaScript模块的调试方法:基于Nodejs内建的调试器,基于V8调试插件和基于Chrome浏览器的调试器. 以下所有的操作都将基于如下代码(example.js): var http = require('http'); var url = req

  • asp.net Web Service 接口大量数据传输解决方案

    asp.net Web Service 接口大量数据传输解决方案

    具体请看下面的流程图及其说明 1,流程图 2,流程说明:线程1开始请求接口获取1W条数据,当数据成功获取后,接口是闲置的,这时我们开始线程2获取数据,同时线程1继续执行获取数据的后续工作,如果转换数据,这里我用的办法是,使用预先定义的实体对象格式 反序列化XML (据说这种方式比遍历XML或是载入到DataSet中循环 读取都要高效的,具体我没有测试过 ,哈哈)将数据插入到数据后停止线程1.使用这样线程循环的办法处理所有线程读取数据.

  • java快速生成接口文档的三种解决方案

    java快速生成接口文档的三种解决方案

    目录 前言 方案一,使用japidocs 基本用法 方案2,swagger + knife4j 生成步骤 方案3,开源的接口文档生成工具 总结 前言 常常在项目收尾阶段,客户需要项目的接口文档,或者是一个大的sass平台,各个产品之间互相调用的时候,需要对方提供接口文档 通常来说,接口文档属于产品的技术沉淀,是一个长期积累的过程,然而,很多时候,开发阶段并不会想的那么多,结果到了需要接口文档的时候总是疲于应付,情急之下,往往采用最笨拙的办法,就是对照着项目代码,一个个拷贝吧 下面针对这个情况,小

随机推荐