文档章节

利用nodejs中http-server组件的proxy参数来联调前端和后端

Jason_hu
 Jason_hu
发布于 2015/04/15 12:11
字数 576
阅读 111
收藏 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 会看到如下结果: 在此输入图片描述

© 著作权归作者所有

共有 人打赏支持
Jason_hu
粉丝 8
博文 19
码字总数 8642
作品 0
浦东
谁说前端需要懂 Nginx 了?

--读《谁说前端不需要懂-Nginx反向代理与负载均衡》有感 读了上文发现内容虽然还是挺好的,但看完,为啥要懂nginx呀,负载均衡和前端哪里有什么半毛钱关系了,没说清楚呀。 当然这个面向前端...

vellengs
06/22
0
0
深入浅出Node.js(四):Node.js的事件机制

Node.js的事件机制 Node.js在其Github代码仓库(https://github.com/joyent/node)上有着一句短短的介绍:Evented I/O for V8 JavaScript。这句近似广告语的句子却道尽了Node.js自身的特色所...

leeldy
2012/10/25
0
0
实现前后端分离的心得

原文出处:陈陈jg 实现前后端分离的心得 对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开...

陈陈jg
2017/07/02
0
0
【深入浅出Node.js系列四】Node.js的事件机制

深入浅出Node.js系列 【深入浅出Node.js系列一】什么是Node.js 【深入浅出Node.js系列二】Node.js&NPM的安装与配置 【深入浅出Node.js系列三】深入Node.js的模块机制 【深入浅出Node.js系列四...

陶邦仁
2016/01/08
226
0
用Next.js快速上手React服务器渲染

新前端时代的服务端渲染也提了很久了,各种技术演进层出不穷。 带你领略一下基于React和Nodejs架构的服务端渲染技术,让你快速上手,开发Next服务端渲染的项目。 本文参考官方文档,做精简总...

方宏春
09/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据框架对比:Hadoop、Storm、Samza、Spark和Flink

简介 大数据是收集、整理、处理大容量数据集,并从中获得见解所需的非传统战略和技术的总称。虽然处理数据所需的计算能力或存储容量早已超过一台计算机的上限,但这种计算类型的普遍性、规模...

hblt-j
31分钟前
2
0
正则介绍及grep/egrep用法

10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 扩展 把一个目录下,过滤所有*.php文档中含有eval的行 grep -r --include="*.php" 'eval' /data 9.1 正则介绍_grep上 什么是正则 ...

zgxlinux
46分钟前
2
0
想用Unity3D引擎软件赚点钱的看过来

前言: 你可以不拥有很多钱 但你一定要有赚钱的能力 目前手上有项目, 需要熟练Unity3D引擎软件的伙伴 有意向的给我发私信

猿神出窍
48分钟前
2
0
Spring Boot全局异常处理

Spring Boot默认的异常处理机制 默认情况下,Spring Boot为两种情况提供了不同的响应方式。 一种是浏览器客户端请求一个不存在的页面或服务端处理发生异常时,一般情况下浏览器默认发送的请求...

狼王黄师傅
今天
8
0
Thinkphp5 优雅配置两个数据库

工作需要需要配置两个数据库,框架5.0的,步骤如下: 1、在database.php同级创建一个database2.php文件 在里面配置第二个数据库信息, 2、在config中配置这个数据库信息: 3、创建第二个表的...

wqzbxh
今天
5
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部