1、 利用package.json 安装nodejs,创建package.json文件:内容如下

"dependencies": {
"http-proxy": "^1.16.2"
}

2、 当前目录下创建 index.js文件:内容如下
var PORT = 3000;
var projectPath = '/../project'; // 本地项目路径 var http = require('http');
var url=require('url');
var fs=require('fs');
var mine=require('./mine').types;
var path=require('path');
var httpProxy = require('http-proxy'); var proxy = httpProxy.createProxyServer({
target: 'http://192.168.12.220:8080/', //接口地址
// 下面的设置用于https
// ssl: {
// key: fs.readFileSync('server_decrypt.key', 'utf8'),
// cert: fs.readFileSync('server.crt', 'utf8')
// },
// secure: false
}); proxy.on('error', function(err, req, res){
res.writeHead(500, {
'content-type': 'text/plain'
});
console.log(err);
res.end('Something went wrong. And we are reporting a custom error message.');
}); var server = http.createServer(function (request, response) {
var pathname = url.parse(request.url).pathname;
//var realPath = path.join("main-pages", pathname); // 指定根目录
console.log(pathname);
var realPath = path.join("."+projectPath+'/', pathname);
var ext = path.extname(realPath);
ext = ext ? ext.slice(1) : 'unknown'; //判断如果是接口访问,则通过proxy转发
if(pathname.indexOf("/deviceService") > -1){
proxy.web(request, response);
return;
} fs.exists(realPath, function (exists) {
if (!exists) {
response.writeHead(404, {
'Content-Type': 'text/plain'
}); response.write("This request URL " + pathname + " was not found on this server.");
response.end();
} else {
fs.readFile(realPath, "binary", function (err, file) {
if (err) {
response.writeHead(500, {
'Content-Type': 'text/plain'
});
response.end(err);
} else {
var contentType = mine[ext] || "text/plain";
response.writeHead(200, {
'Content-Type': contentType
});
response.write(file, "binary");
response.end();
}
});
}
});
});
server.listen(PORT);
console.log("Server runing at port: " + PORT + ".");

3、 如 index.js 第二行所配置:在当前目录上层目录创建项目文件夹 project
放入index.html 测试页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>1111</title>
<script>
function readFile(a,back){
setTimeout(function(){
back(a);
},1000);
} const Thunk = function(fn) {
return function (...args) {
return function (callback) {
return fn.call(this, ...args, callback);
}
};
};
var tf = Thunk(readFile); var gg = {
*g(){
var f1 = yield tf('fileA');
console.log('---->>',f1);
var f2 = yield tf('fileB');
console.log('---->>',f2);
// if (f2=="fileB")
// return;
// ...
var fn = yield tf('fileN');
console.log('---->>',fn);
}
}
var g = function* () {
var f1 = yield tf('fileA');
console.log('---->>',f1);
var f2 = yield tf('fileB');
console.log('---->>',f2);
// if (f2=="fileB")
// return;
// ...
var fn = yield tf('fileN');
console.log('---->>',fn);
} const run_thunk = function (fn) {
var gen = fn(); function next(err, data) {
var result = gen.next(err);
if (result.done) return;
result.value(next);
}
next();
} function * a(){
yield 1;
yield 2;
} var init = function(){
// run_thunk(gg.g);
var m = setTimeout(function(){
alert('hell');
},5000); setTimeout(function(){
clearTimeout(m);
alert('111');
},1000);
// var i = a();
// console.log(i.next());
// console.log(i.next());
// console.log(i.next());
}
init();
</script>
</head>
<body>
1111
</body>
</html>

4、cnpm install

5、node index.js 开启3000服务

6、注:mine.js 内容:

exports.types = {
"css": "text/css",
"gif": "image/gif",
"html": "text/html",
"ico": "image/x-icon",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"js": "text/javascript",
"json": "application/json",
"pdf": "application/pdf",
"png": "image/png",
"svg": "image/svg+xml",
"swf": "application/x-shockwave-flash",
"tiff": "image/tiff",
"txt": "text/plain",
"wav": "audio/x-wav",
"wma": "audio/x-ms-wma",
"wmv": "video/x-ms-wmv",
"xml": "text/xml",
"woff": "application/x-woff",
"woff2": "application/x-woff2",
"tff": "application/x-font-truetype",
"otf": "application/x-font-opentype",
"eot": "application/vnd.ms-fontobject"
};

项目结构:     -----  nodeServer

|---- package.json

|---- index.js

|---- mine.js

|---- node_modules

-----  project

|---- index.html

在本地设置 http-proxy 代理 (前后端分离)的更多相关文章

  1. nginx反向代理前后端分离项目(后端多台)

    目前软件架构都比较流行前后端分离,前后端的分离也实现了前后端架构的分离,带来的好处 —— 整个项目的开发权重往前移,实现真正的前后端解耦,动态资源和静态资源分离,提高了性能和扩展性. 通常Spring ...

  2. express的proxy实现前后端分离

    var express = require('express') var proxy = require('http-proxy-middleware') var app = express() ap ...

  3. mock的使用及取消,node模仿本地请求:为了解决前后端分离,用户后台没写完接口的情况下

    借鉴:https://www.jianshu.com/p/dd23a6547114 1.说到这里还有一种是配置node模拟本地请求 (1)node模拟本地请求: 补充一下 [1]首先在根目录下建一个d ...

  4. 前后端分离产生的跨域问题的解决方案之--jsonp、nginx代理、设置头信息等

    前言 在前后端没有分离的时候,前端开发要么是写静态页面,数据渲染后端来做,要么就是前端的页面和后端的代码刚开始的时候就合并在一起,每次后端代码更新了之后,前端也要更新一下代码,然后重启一下服务,还是比 ...

  5. 在centos7.6上部署前后端分离项目Nginx反向代理vue.js2.6+Tornado5.1.1,使用supervisor统一管理服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_102 这一次使用vue.js+tornado的组合来部署前后端分离的web项目,vue.js不用说了,前端当红炸子鸡,泛用性非常广 ...

  6. nginx反向代理实现前后端分离&跨域问题

    1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...

  7. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

  8. nginx 前后端分离 代理转发,解决跨域问题

    场景 适用于公司有前端,项目采用前后端分离.类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题 配置说明 worker_processes 1; even ...

  9. 简述前后端分离的情况下,Vue实现点击图片下载到本地(并实现IE11浏览器的兼容)

    1.简述 在前后端分离的项目中涉及跨域问题,通常都会使用token进行验证.最近在前后端分离的项目中在一个问题上搞了很久,就是以前下载附件或者导出数据为文件的时候,在以前的那些项目前端可以直接用 wi ...

随机推荐

  1. Ubuntu16.04 安装 Django

    pip2 install django==1.11 或者手动安装: 链接:https://pan.baidu.com/s/1uQJD-pON7gELoCC2TwYnEw 提取码:flgg cd Dja ...

  2. ubuntu 16.04 u盘挂载以及卸载

    1.列出所有磁盘 sudo fdisk -l 2.最后一段信息显示的为u盘 Device Boot Start End Sectors Size Id Type /dev/sdb4 * 256 786 ...

  3. Java并发编程:Callable、Future和FutureTask(转)

    Java并发编程:Callable.Future和FutureTask 在前面的文章中我们讲述了创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一 ...

  4. C# 二进制图片串互转

    C# byte数组与Image的相互转换   功能需求: 1.把一张图片(png bmp jpeg bmp gif)转换为byte数组存放到数据库. 2.把从数据库读取的byte数组转换为Image对 ...

  5. YOLO V3论文理解

    YOLO3主要的改进有:调整了网络结构:利用多尺度特征进行对象检测:对象分类用Logistic取代了softmax. 1.Darknet-53 network在论文中虽然有给网络的图,但我还是简单说一 ...

  6. css3转盘

    此效果涉及到 : 1. css 画图形 2. css3 动态效果 3. 贝塞尔曲线 用法 <style> .lds-hourglass { display: inline-block; p ...

  7. Codeforces 893E - Counting Arrays

    893E - Counting Arrays 思路:质因子分解. 对于每个质因子,假设它有k个,那么求把它分配到y个数上的方案数. 相当于把k个小球分配到y个盒子里的方案数. 这个问题可以用隔板法(插 ...

  8. Tomcat 中文乱码 设置UTF-8编码 问题解决办法

    在Java Web开发中,http请求带有中文字符的URI如果不处理容易出现乱码问题:这是因为Tomcat容器默认编码是iso-8859-1引起的,因此要避免出现乱码就要需要做相应的处理.解决办法如下 ...

  9. Nginx+uWsgi生产部署Django

    部署得过程很简单,部署得核心在于,为什么要这样做,每一个参数代表什么意思,最终的目的是得了解,一些基概念性的东西. uWsgi简介 说Uwsgi之前,先说一下Wsgi. 什么是Wsgi? WSGI: ...

  10. CentOS 7 Install Gitlab CE

    https://hostpresto.com/community/tutorials/how-to-install-and-setup-gitlab-on-centos-7/ http://linux ...