利用nodejs中http-server组件的proxy参数来联调前端和后端
博客专区 > Jason_hu 的博客 > 博客详情
利用nodejs中http-server组件的proxy参数来联调前端和后端
Jason_hu 发表于3年前
利用nodejs中http-server组件的proxy参数来联调前端和后端
  • 发表于 3年前
  • 阅读 57
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

在开发项目的过程中,我们的框架是这样的。

1、client项目,采用angularjs+bootstrap开发,主要是html+css+javascript代码; 2、server项目,主要采用java的springmvc框架开发,提供基于http的json数据格式api;

client端工程师写好代码后,会需要和server端程序联调,这个时候,client的代码在本地,而server的测试环境部署在某个test服务器,一般我们会将client的目录托管在一个本地的httpserver来运行,很多html的编辑器都支持这个能力,譬如nodejs的http-server,idea编辑器等;

但是这个时候会涉及到一个跨域请求的问题,一般情况下:

这样,如果client的网页,需要访问server的地址的时候,浏览器缺省是禁止访问的。

http-server

http-server是nodejs框架中的一个工具,本身是使用javascript编写的,当我们安装好nodejs之后,并配置好cnpm(必须配置,否则npm下载包太慢并容易断)。

安装http-server

cnpm install http-server -g

启动,带-P参数

http-server -P "http://testserver"
Starting up http-server, serving ./ on: http://0.0.0.0:8080
Unhandled requests will be served from: http://testserver
Hit CTRL-C to stop the server

P参数的目的,是当http-server发现请求地址本地不存在的时候,会将该请求的URI转发给另外一个web服务器处理,收到结果后,以本地服务器来响应给请求方,以达到proxy代理的目的。

测试

先准备一个server端java的测试api,地址为:http://testserver/api/test.json

curl "http://testserver/api/test.json?id=1003&msg=测试http-server的代理"
{"ret":0,"data":"测试http-server的代理:1003, now time is 1429069220655."}

再准备一个client测试文件test.html,地址为:http://localhost:8080/test.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello jQuery</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: "/api/test.json?id=1003&msg=测试http-server的代理"
            }).then(function(data, status, jqxhr) {
                console.log(data);
                $('.test-id').append(data.ret);
                $('.test-data').append(data.data);
                console.log(jqxhr);
            });
        });
    </script>
</head>

<body>
<div>
    <p class="test-id">The ret is </p>
    <p class="test-data">The data is </p>
</div>
<h4>Response headers:</h4>
<div class="response-headers">
</div>
</body>
</html>

运行:

http-server -P "http://testserver"

启动浏览器,访问网页地址: http://localhost:8080/test.html 会看到如下结果: 在此输入图片描述

共有 人打赏支持
粉丝 9
博文 13
码字总数 6375
×
Jason_hu
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: