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 相关文章推荐
javascript之可拖动的iframe效果代码
Aug 01 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
vue.js实现简单购物车功能
May 30 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP基础学习小结
2011/04/17 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
JavaScript中的对象化编程
2008/01/16 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python-openCV开运算实例
2020/07/05 Python
医学类导师推荐信范文
2013/11/19 职场文书
低碳环保口号
2014/06/12 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
2014年派出所工作总结
2014/11/21 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
信息技术国培研修日志
2015/11/13 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js