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 ...
随机推荐
- Python 矩阵与矩阵以及矩阵与向量的乘法
import numpy as np numpy模块的array相乘时,有两种方式:一是矩阵形式,二是挨个相乘. 需要用矩阵形式相乘时,则要用np.dot()函数. #矩阵与矩阵相乘a = np.ar ...
- 【转】【C#】迭代器IEnumerable和IEnumerator
迭代器模式是设计模式中行为模式(behavioral pattern)的一个例子,他是一种简化对象间通讯的模式,也是一种非常容易理解和使用的模式.简单来说,迭代器模式使得你能够获取到序列中的所有元素而 ...
- Javascript特效代码大全(420个)（转）
转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习 ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...
- 【BZOJ】1631: [Usaco2007 Feb]Cow Party（dijkstra）
http://www.lydsy.com/JudgeOnline/problem.php?id=1631 看到m<=100000果断用dij(可是好像dij比spfa还慢了在这里?)//upd: ...
- Windows远程访问OEM乱码解决
问题描述 发现用Windows访问Linux安装的Oracle时oem按钮总是乱码,整理解决方法如下: OEM简介及按钮乱码问题 http://www.linuxidc.com/Linux/2013 ...
- 编程之美 set 5 寻找数组中最大值和最小值
解法 1. 设置 min, max 两个变量, 然后遍历一遍数组, 比较次数为 2*N 2. 依然设置 min, max 两个变量并遍历数组, 但将遍历的 step 设置为 2, 比较次数为 1.5 ...
- Spring JDBC样例
这里介绍一下通过Spring JDBC的方式进行数据库的增删改查的操作.在进行程序的编写之前我们需要在本地MySQL数据库中创建一张User表,如下所示: create database user_d ...
- gulp 报错'wacth' errord
gulp.wacth(...).watch is not a function 如图: 检查了gulpfile.js文件中的wacth事件:发现这样的写法出错: gulp.task('watch', ...
- ECharts使用（1）（转载）
转载自http://www.cnblogs.com/Olive116/p/3634480.html 1. EChart最新的文档目录. 首先创建一个解决方案,目录如下: 之前的一篇文章中讲到如果要使 ...
- 面试之三：JVM类加载机制-类加载各阶段说明和类加载器
一.类生命周期:共7个阶段 类从被加载到虚拟机内存中开始,到卸载出内存.整个生命周期包括:加载.验证.准备.解析.初始化.使用和卸载7个阶段. 其中验证.准备.解析3个部分统称为连接. 类加载的过程: ...