node+express+http-proxy-middleware做代理
最近，不赶着做项目，于是想着怎样做公司的前后端分离，这个时候想到了nodejs，于是打算今天做一个代理的demo，其实代码很简单，但是一直卡在一个地方，现在问题解决了，贴上代码和截图。
html
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta charset="utf-8">
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
.hello{
color: #428bca;
}
</style>
</head>
<body>
<h3>这是index页面</h3> <span class="hello">你可以点击这里</span> <script type="text/javascript">
$(function(){
var contextPath = 'http://localhost:3000';
$('.hello').on('click',function(){
$.ajax({
type:'get',
data:'click',
url:contextPath+'/api/hello',
success:function(data){
console.log(data);
},
error:function(data){
console.log(data);
} })
})
})
</script> </body>
</html>
localhost:3000服务端的代码
const express = require('express');
const proxy = require('http-proxy-middleware');//引入代理中间件
const app = express();
app.use(express.static('public'));
//app.use(express.static('client'));
// Add middleware for http proxying
const apiProxy = proxy('/api', { target: 'http://localhost:8080',changeOrigin: true });//将服务器代理到localhost:8080端口上[本地服务器为localhost:3000]
app.use('/api/*', apiProxy);//api子目录下的都是用代理
// Render your site
app.get('/index.htm', function(req,res){
res.sendFile(__dirname+'/src/index.html');
});
app.listen(3000, () => {
console.log('Listening on: http://localhost:3000');
});
localhost:8080服务上的代码
var express = require('express');
var app = express();
app.use(express.static('public'));
var server = app.listen(8080,function(){
var host = server.address().address;
var port = server.address().port;
console.log('应用实例，访问地址为 http://%s:%s',host,port);
})
app.get('/api/hello', function(req,res){
let data = {}
data["name"] = "lucy";
data["age"] = "23";
res.send(data);
});
项目结构截图
其中需要注意的一个细节是，当起了一个本地服务器，那么静态文件的引入会有一个问题，解决办法如下Nodejs Express下引入本地文件的方法 出处：http://www.cnblogs.com/cocos2014/p/4378548.html?utm_source=tuicool&utm_medium=referral
Express的结构如下：
|---node_modules------用于安装本地模块。
|---routes------------用于存放路由文件。
|---views-------------用于存放网页的模板。
|---app.js------------应用程序的启动脚本。
|---package.json------项目的配置文件。
<script src="/javascripts/datepicker.js" type="text/javascript"></script>
当浏览器发出非HTML文件请求时，服务器端就到public目录下寻找javascripts，再到javascripts下寻找bootpicker.js文件。
node+express+http-proxy-middleware做代理的更多相关文章
- 运用 node + express + http-proxy-middleware 实现前端代理跨域的 详细实例哦
一.你需要准备的知识储备 运用node的包管理工具npm 安装插件.中间件的基本知识: 2.express框架的一些基础知识,知道如何建立一个小的服务器:晓得如何快速的搭建一个express框架小应用 ...
- Node+Express+MongoDB + Socket.io搭建实时聊天应用
Node+Express+MongoDB + Socket.io搭建实时聊天应用 前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战 ...
- Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(二)--node解析与环境搭建
前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战.写教程一方面在自己写的过程中需要考虑更多的东西,另一方面希望能对node入门者有 ...
- 【Node】node.js实现服务器的反向代理，解决跨域问题
跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...
- node解决跨域和服务器代理详解代码
node中有很多解决服务器代理的插件,这里简介一个:express-http-proxy 之前网上查的使用node解决跨域的插件,有很多,例如,cors,koa2,这里解决跨域问题我拿原生解决的,ex ...
- 【原】小玩node+express爬虫-2
上周写了一个node+experss的爬虫小入门.今天继续来学习一下,写一个爬虫2.0版本. 这次我们不再爬博客园了,咋玩点新的,爬爬电影天堂.因为每个周末都会在电影天堂下载一部电影来看看. talk ...
- 【原】小玩node+express爬虫-1
最近开始重新学习node.js,之前学的都忘了.所以准备重新学一下,那么,先从一个简单的爬虫开始吧. 什么是爬虫 百度百科的解释: 爬虫即网络爬虫,是一种自动获取网页内容的程序.是搜索引擎的重要组成部 ...
- Node+Express+node-mysql 实战于演习 全套mysql(增删改查)
最近这段时间研究Node感觉不错,自己做了一个增删改查,虽然有些简陋,但是思想是想通的,其实所有项目都是增删改查,有助于初学者快速掌握Node 首先 本实例展示的是基于Node+Express+nod ...
- JQuery之proxy实现绑定代理
在javascript中,this指代的对象时常会变化,这会造成程序,混乱,一般做法就是先将this保存在一个变量中,就不怕她变了,我们先看一个小例子 var A = function(){ this ...
随机推荐
- c#方法生成mysql if方法(算工作日)
public static string retunSQl(string s,string e){ return @"IF ( "+s+ ">" +e+ ...
- PHPExcel导出插入图片和居中问题
首先到网上先下载PHPExcel 下载后解压得到这两个文件 下载后引用该文件 最后编写相关代码: 首先是图片插入导出 $objDrawing = new PHPExcel_Worksheet_Draw ...
- sizeof 数组与指针
在学习指针的时候,得到指针的定义和数组的定义一样,但是这时候就很好奇,指针只是一个地址,那数组和指针一样的话,sizeof时怎么得知其长度呢. 于是百度了下面的回复: 千万不要把数组名看成指针,尽管有 ...
- Laravel5.1 搭建博客 --编译前端文件
上篇文章写了Gulp编译前端文件,这篇记录下在搭建博客中使用Gulp 1 引入bootstrap和js 1.1 首先先在项目本地安装Bower sudo npm install bower 1.2 创 ...
- 如何在VS2010中更好的编写JavaScript代码
VS2010默认的JavaScript代码编辑器相对简单.对于大家熟悉的代码折叠,代码结构.函数导航,代码高亮等都不支持,使用很不便.下面介绍下我发现的几个VS2010插件,具有哪些功能,如何安装和使 ...
- 深入了解Java之虚拟机内存
在讨论JVM内存区域分析之前,先来看一下Java程序详细运行的过程: -我们今天就来分析一下Java程序运行过程的-Runtime-Data-Area(运行时数据)-这一块" class=& ...
- Hibernate_day02--Hibernate事务操作_api使用
Hibernate事务操作 事务相关概念 1 什么是事务 事务是操作中最基本的单元,表示一组操作要么都成功,有一个失败那么所有都失败.最典型的场景:银行转账 2 事务特性 原子性 一致性 隔离性 持久 ...
- 编程之美 set 19 连连看游戏设计
题目 1. 怎么用简单的计算机模型来描述这个问题 ? 2. 怎么判断两个图像是否能相消 3. 怎么求出相同图形之间的最短距离(转弯数最少)? 4. 怎么确定目前处于死锁状态? 如何设计算法来解除死锁? ...
- thinkphp5如何使用layout
thinkphp5的layout和以前的版本有点差异. 首先开启配置文件中的 'template' => [ 'layout_on' => true, // 'layo ...
- ArcGIS -- ArcSDE Lock request conflicts with an established lock
1.查询下列表是否有数据 select * from sde.state_locks; select * from sde.object_locks; select * from sde.layer_ ...