最近需要调式大量包含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数据是紧缩格式,人不易识别,所以干脆重新处理了下,方便调试。

使用反向代理(NodeJS)调试前端AJAX的更多相关文章

  1. 利用Node实现HTML5离线存储的方法

    这篇文章主要介绍了利用Node实现HTML5离线存储的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 前端监听websocket消息并实时弹出(实例代码)

    这篇文章主要介绍了前端监听websocket消息并实时弹出,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. HTML5之消息通知的使用(Web Notification)

    通知可以说是web中比较常见且重要的功能,私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈。本篇文章主要介绍了HTML5之消息通知的使用(Web Notification),感兴趣的小伙伴们可以参考一下

  4. 关于h5中的fetch方法解读(小结)

    这篇文章主要介绍了关于h5中的fetch方法解读(小结),fetch身为H5中的一个新对象,他的诞生,是为了取代ajax的存在而出现,有兴趣的可以了解一下

  5. ios – 使用带有NodeJs HTTPS的certificates.cer

    我为IOS推送通知生成了一个.cer文件,我希望将它与NodeJSHTTPS模块一起使用.我发现HTTPS模块的唯一例子是使用.pem和.sfx文件,而不是.cer:有解决方案吗解决方法.cer文件可以使用两种不同的格式进行编码:PEM和DER.如果您的文件使用PEM格式编码,您可以像使用任何其他.pem文件一样使用它(有关详细信息,请参见Node.jsdocumentation):如果您的文件使

  6. ios – 我可以使用哪些iPhone OS API来实现类似于iBook页面翻转过渡的过渡动画?

    >UIKitAPI中的某个地方是否可以使用该动画,还是我必须自己实现?它肯定有3D感觉,他们可以使用OpenGLESAPI吗?解决方法Apple当然使用OpenGLES来实现它.Apple使用的实际API是私有的,但thisblogger具有示例代码的实现的开始.

  7. ios – 使用NSURLSession获取JSON数据

    我试图从谷歌距离api使用NSURLSession获取数据,但如下所示,当我打印响应和数据时,我得到的结果为NULL.可能是什么问题?

  8. iOS 7,用于断开调用的私有API CTCallDisconnect不起作用

    谢谢!

  9. 我应该使用哪个高级API来管理iOS上的UDP套接字?

    在“NetworkProgrammingTopicsConceptualGuide”的“UsingSocketsandStreams”一章中,Apple说:Note:POSIXnetworkingdoesnotactivatethecellularradiooniOS.Forthisreason,thePOSIXnetworkingAPIisgenerallydiscouragediniOS.同样

  10. 保护MY REST API仅用于MY IOS APP

    我在Laravel中设计一个RESTAPI,用于我的ios应用程序.目前我被困在以下几点:如何保护我的RESTAPI只允许访问我的ios应用程序?听起来我需要通过向我的IOSAPP授予一个私钥来将类似于HMAC方法的内容合并到我的IOSAPP代码中.当从iosapp中运行请求时,我传递带有私钥和其他数据的哈希,然后当在服务器上收到请求时,我通过重新计算哈希来检测请求是否来自应用程序内的用户.我不知道这是否安全&我会认为不是吗?

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到<input>中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部