使用反向代理(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,如需转载请自行联系原作者

相关文章
|
11天前
|
JavaScript 前端开发 API
Node.js在前端的妙用:打造更出色的Web体验
Node.js在前端的妙用:打造更出色的Web体验
181 5
|
11天前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
11天前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
65 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
11天前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
54 0
|
2天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
11天前
|
前端开发 数据处理 Android开发
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
【4月更文挑战第30天】本文探讨了Flutter开发中的调试技巧和工具,强调其在及时发现问题和提高效率上的重要性。介绍了基本的调试方法如打印日志和断点调试,以及Android Studio/VS Code的调试器和Flutter Inspector的使用。文章还涉及调试常见问题的解决、性能和内存分析等高级技巧,并通过实际案例演示调试过程。在团队协作中,有效调试能提升整体开发效率,而随着技术发展,调试工具也将持续进化。
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
|
11天前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
|
11天前
|
SQL 前端开发 JavaScript
前端vite+vue3结合后端node+koa——实现代码模板展示平台(支持模糊搜索+分页查询)
前端vite+vue3结合后端node+koa——实现代码模板展示平台(支持模糊搜索+分页查询)
44 4
|
11天前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
62 7
|
11天前
|
前端开发 JavaScript 内存技术
Node-前端模块化
Node-前端模块化
24 0
Node-前端模块化