博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用反向代理(NodeJS)调试前端AJAX
阅读量:7003 次
发布时间:2019-06-27

本文共 2012 字,大约阅读时间需要 6 分钟。

  最近需要调式大量包含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 中添加路由配置

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

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

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 部分需要配置服务器主机、路径、请求方法等,直接从网上找了一段改改(嗯,一看就是抄的,因为我喜欢用双引号):

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代码。

  先处理异常的情况

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

  再处理正常的情况

response.setEncoding('UTF-8');response.on('data', function(data) {    var obj = JSON.parse(data)    res.json(obj);});

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

转载地址:http://cyutl.baihongyu.com/

你可能感兴趣的文章
WebService案例入门(基础篇)
查看>>
回档|NOIP2012 同余方程
查看>>
久违的博客园
查看>>
在MAC中安装Compass的方法 (转)
查看>>
分页显示
查看>>
存储过程、事物
查看>>
msyql rename表
查看>>
sm3算法的简单介绍
查看>>
Demo 3: 创建新客户
查看>>
SQL大全
查看>>
pwnable flag之write up
查看>>
Java 征途:行者的地图
查看>>
字符常量 字符串 sprintf
查看>>
input[type="file"]上传图片并显示图片
查看>>
BBS第四天
查看>>
HDU 1016 Prime Ring Problem (DFS)
查看>>
桥接模式(Bridge Pattern)
查看>>
深入理解各种排序算法
查看>>
Installation Oracle11gR2 RAC---常见报错处理
查看>>
【引用】高手新手都能用的140个技巧
查看>>