文档章节

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

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

© 著作权归作者所有

共有 人打赏支持
Jason_hu
粉丝 8
博文 19
码字总数 8642
作品 0
浦东
实现前后端分离的心得

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

陈陈jg ⋅ 2017/07/02 ⋅ 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 ⋅ 0

基于API的前后端分离开发

传统MVC: CV的分离度差(Controller-View),不适用于多端开发。 前后联调的效率低下。 MIV: 一个后端,多个前端(Controller-Views)。 前后端完全分离,加快开发、测试速度。 前后端可以...

欧钟源 ⋅ 2015/10/03 ⋅ 0

全栈工程师之路-Node.js

全栈工程师之路-Node.js 高可用架构专用 原文[高可用架构] https://mp.weixin.qq.com/s?biz=MzAwMDU1MTE1OQ==&mid=405001493&idx=1&sn=f0ecab9b31bad83fb065ac37bb728245&scene=1&srcid=032......

i5ting ⋅ 2016/04/08 ⋅ 0

前后端分离的思考与实践(二)

原文出处:淘宝UED - Herman 基于前后端分离的模版探索 前言 在做前后端分离时,第一个关注到的问题就是 渲染,也就是 View 这个层面的工作。 在传统的开发模式中,浏览器端与服务器端是由不...

淘宝UED - Herman ⋅ 2014/04/18 ⋅ 0

Pomelo架构浅析

Pomelo架构浅析 1. pomelo简介: 网易在2012年11月开源的一个网游服务器框架,使用javascript作为开发语言,运行在node.js环境下。具体说明请查阅:https://github.com/NetEase/pomelo pomel...

霹靂小金剛 ⋅ 2013/03/01 ⋅ 1

【深入浅出Node.js系列一】什么是Node.js

深入浅出Node.js系列 【深入浅出Node.js系列一】什么是Node.js 有关Node.js的技术报道越来越多,Node.js的写法也是五花八门,有写成 NodeJS的,有写成Nodejs的,到底哪一种写法最标准呢,我们不妨...

陶邦仁 ⋅ 2016/01/07 ⋅ 0

为什么要用 Node.js

本文作者:伯乐在线 -bestswifter 。未经作者许可,禁止转载! 欢迎加入伯乐在线专栏作者。 这是一个移动端工程师涉足前端和后端开发的学习笔记,如有错误或理解不到位的地方,万望指正。 No...

伯乐在线 ⋅ 2016/08/18 ⋅ 0

全栈工程师之路-Node.js

全栈工程师之路-Node.js 高可用架构专用 原文[高可用架构] https://mp.weixin.qq.com/s?_biz=MzAwMDU1MTE1OQ==&mid=405001493&idx=1&sn=f0ecab9b31bad83fb065ac37bb728245&scene=1&srcid=03......

i5ting ⋅ 2016/04/08 ⋅ 1

深入浅出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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

笔试题之Java基础部分【简】【一】

基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语法,集合的语法,io 的语法,虚拟机方面的语法,其他 1.length、length()和size() length针对...

anlve ⋅ 28分钟前 ⋅ 2

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 52分钟前 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 57分钟前 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 8

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部