使用反向代理(NodeJS)调试前端AJAX

简介:

 最近需要调式大量包含AJAX的前端代码,数据是采用的JSON格式。作为一个懒人,我不想每次都去打开 Visual Studio 来跑服务(VS实在太重量级了)。但是AJAX访问有跨域的问题,不能直接从本地JSON文件中去取模拟数据,所以我跑了一个NodeJS+Express来做数据模拟。


  另外,用JSON文件来模块数据还有两个问题:一是就算同一个API,不同的业务处理都有不同的返回结果,何况API还不是少数;另外,AJAX调用同一个API,根据业务处理不同,需要返回不同的结果——这是静态JSON文件做不到的。


  如果用NodeJS来模拟业务分支,返回不同的结果……虽然可以实现,但是相当于重新写了个简化版业务,太累太累……。那么,用NodeJS把获取的请求转发给开发服务器,再把开发服务器返回的结果返回到前端呢——这个办法好,标准的反向代理模型。


  然后就是去寻找NodeJS的代理组件了,找到了 node-http-proxy 和 simple-http-proxy,经过简单的试验都没让它们工作起来,可能是有地方配置错了。由于不想费神去研究这两个东东,干脆直接用NodeJS的http.request来实现。反正只是做JSON代理,而且也没有什么业务逻辑在里面。


  基本思路就是为 express 写一个路由处理模块,把所有 "/api/" 开始的 URL 都用这个路由处理器模块来处理。这个模块将收到请求的URL转换成开发服务器上的URL,再把请求的参数原样带上,然后将开发服务器上返回的结果直接返回给浏览器。


  在 app.js 中添加路由配置


1
app.get( "/api/*" , require( "./routes/proxy" ).proxy);


  然后添加一个文件 routes/proxy.js,用来做简化版反向代理


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var  http = require( "http" );
var  querystring = require( "querystring" );
exports.proxy =  function (req, res) {
     // 获取 /api/ 之后的的 URL 路径
     var  path = req.path.replace(/^\/?api/,  "" );
     // 获取请求参数
     var  contents = querystring.stringify(req.query);
     var  options = {
         // TODO 配置访问参数
     };
     // 作为 http 客户端向服务器端发送请求
     var  request = http.request(options,  function (response) {
         if  (response.statusCode != 200) {
             // TODO 请求失败,返回错误
             return ;
         }
         // TODO 把 response 得到的数据通过 res 发送给浏览器
     });
     // 向服务器发送请求
     request.write(contents);
     request.end();
};


  其中,根据文档,options 部分需要配置服务器主机、路径、请求方法等,直接从网上找了一段改改(嗯,一看就是抄的,因为我喜欢用双引号):


1
2
3
4
5
6
7
8
9
var  options = {
     host:  'dev.my-server.com' ,
     path: path,
     method:  'GET' ,
     headers: {
         'Content-Type' 'application/x-www-form-urlencoded' ,
         'Content-Length' : contents.length
     }
};


  然后是处理开发服务器的返回结果。两种情况,正常的情况应该返回JSON数据,返回代码200;异常(比如网络异常)的情况,应该返回非200代码。


  先处理异常的情况


1
2
3
4
if  (response.statusCode != 200) {
     res.status(response.statusCode).end();
     return ;
}


  再处理正常的情况


1
2
3
4
5
response.setEncoding( 'UTF-8' );
response.on( 'data' function (data) {
     var  obj = JSON.parse(data)
     res.json(obj);
});


  本来得到数据之后是可以直接发送给浏览器的,但是因为服务器返回出来的JSON数据是紧缩格式,人不易识别,所以干脆重新处理了下,方便调试。



本文转自边城__ 51CTO博客,原文链接:http://blog.51cto.com/jamesfancy/1391153,如需转载请自行联系原作者

相关文章
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
57 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
1月前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
41 0
|
3月前
|
前端开发
前端毕业设计|基于Vue+Nodejs实现游戏资讯平台(二)
前端毕业设计|基于Vue+Nodejs实现游戏资讯平台
|
3月前
|
缓存 前端开发 JavaScript
【第22期】 一文读懂前端调试利器whistle
【第22期】 一文读懂前端调试利器whistle
34 0
|
11天前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
28 7
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
|
1月前
|
SQL 存储 JavaScript
前端浏览器调试详解版
前端浏览器调试详解版
54 0
|
2月前
|
JavaScript 前端开发 算法
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
66 0
|
2月前
|
Web App开发 JavaScript 前端开发
【Node.js】大前端技能最通俗易懂的讲解 快速入门必看
【Node.js】大前端技能最通俗易懂的讲解 快速入门必看
32 0
|
3月前
|
缓存 前端开发 安全
前端反向代理的神奇世界:加速、安全与缓存的秘密(下)
前端反向代理的神奇世界:加速、安全与缓存的秘密(下)