node实现简单的反向代理服务器


Posted in Javascript onJuly 26, 2017

每当提起反向代理器,人们通常一想到的就是 Nginx,但是今天我们暂时忽略大名鼎鼎的 Nginx,采用同样也是使用单线程、事件循环的服务端小弟——Node 来达成

跨域问题是前端开发很常见的问题

解决方案有很多种

  1. jsonp返回
  2. Access-Control-Allow-Origin:'*' (需要注意的是 对于post请求会变成option请求需求后端支持)
  3. 前端添加代理

前端添加代理

以vue-cli为例,前端添加代理

dev: {
  env: require('./dev.env'),
  port: 8888,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
   '/api':{
    target: 'http://localhost:3000',
    changeOrigin: true,
   }
  }

其中'/api'为接口的前缀,target为后端服务地址

前端请求示例

vm.$http.post('/api/reg', JSON.stringify(info)).then(() => {

 }, () => {

 });

反向代理

反向代理可以理解为指定一个服务地址为内部服务器地址。

为什么需要反向代理

如果只是作为接口请求,其实前端搭建代理服务器就可以了,但是代理服务器并不能满足所有的日常开发。

比如说单点登录的实现,需求服务端做302跳转。但是前端文件没有部署到后端服务器时,set-cookie是不能成功种下cookie登录信息的。

这就需要在后端服务器添加反向代理。

示例如下

const http = require('http');
const httpProxy = require('http-proxy');
const proxy = httpProxy.createProxyServer();
const proxyServer = http.createServer((req, res) => {
 proxy.web(req, res, {
  target: 'http://localhost:8888',
 });
});
proxyServer.listen(8088, () => {
 console.log('proxy server is running ');
});

这样前端开发就可以在8088端口了,当然热加载功能是在前端服务器的8888端口

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
JavaScipt基本教程之前言
Jan 16 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
DOM 高级编程
May 06 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
Angular项目中$scope.$apply()方法的使用详解
Jul 26 #Javascript
Vue中计算属性computed的示例解读
Jul 26 #Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 #Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 #Javascript
js实现图片轮播效果学习笔记
Jul 26 #Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 #Javascript
vue上传图片组件编写代码
Jul 26 #Javascript
You might like
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python字符串连接的N种方式总结
2014/09/17 Python
Python下的twisted框架入门指引
2015/04/15 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python探索之SocketServer详解
2017/10/28 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Python xlwt模块使用代码实例
2020/06/10 Python
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
小学见习报告
2015/06/23 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
vue使用echarts实现折线图
2022/03/21 Vue.js