【Node基础入门】----node中间层做接口转发,实现跨域请求

前言:
    起因,接手了一个四年前的老项目(2018年的),项目是前后端分离,并且是由前端用node解决的跨域问题。一个node小白,为了更好的了解项目的搭建以及线上部署,无奈踏上node的学习之旅。(PS:果然,自己欠下的技术债,还得自己来还╮(╯▽╰)╭)。
    那么,这篇文章先从原理入手,了解一下基础知识,然后,再根据资料进行实践一下吧。那么,我们一起来看看,node中间层是怎样做的请求合并转发的?

一、初识node中间层

1.1 什么是中间层

    中间层就是,前端–请求–>node.js----请求---->后端----响应---->node.js–数据处理–响应---->前端。这么一个流程,这个流程的好处就是当业务逻辑过多时,或者业务需求在不断变更的时候,前端不需要过多的去改变业务逻辑,与后端低耦合。前端即显示、渲染。后端获取和存储数据。中间层处理数据结构,返回给前端可用可渲染的数据结构
    nodejs是起中间层的作用的,即根据客户端不同请求来做相应的处理或渲染页面,处理时可以是把获取的数据做简单的处理交由底层java那边做真正的数据持久化或数据更新,也可以是从底层获取数据做简单的处理返回给客户端。
    通常,我们把web领域分为客户端和服务端,也就是前端和后端,这里的后端就包括了网关,静态资源,接口,缓存,数据库等。而中间层呢,就是在后端这里再抽离一层出来,在业务上处理和客户端衔接更紧密的部分,比如页面渲染(SSR),数据聚合,接口转发等等

1.2 中间层可以做的事情
  • 代理:在开发环境下,我们可以利用代理来,解决最常见的跨域问题;在线上环境下,我们可以利用代理,转发请求到多个服务端场景后端使用java springboot开发多个微服务(这里没有使用sping cloud Eureka做服务管理与API协调),每个服务的IP一致,端口不一致);
  • 缓存:缓存其实是更靠近前端的需求,用户的动作触发数据的更新,node?中间层可以直接处理一部分缓存需求;
  • 限流:node中间层,可以针对接口或者路由做响应的限流;
  • 日志:相比其他服务端语言,node中间层的日志记录,能更方便快捷的定位问题(是在游览器端还是服务端);
  • 监控:擅长高并发的请求处理,做监控也是合适的选项;
  • 鉴权:有一个中间层去鉴权,也是一种单一职责的实现;
  • 路由:前端更需要掌握页面路由的权限和逻辑;
  • 服务端渲染:node中间层的解决方案更灵活,比如SSR、模板直出、利用一些JS库做预渲染等等。
1.3 node转发API(node中间层)的优势
  • 可以在中间层把java/php的数据,处理成对前端更友好的格式;
  • 可以解决前端的跨域问题,因为服务器端的请求是不涉及跨域的,跨域是对游览器的同源策略到导致的;
  • 可以将多个请求在通过中间层合并,减少前端的请求

    抽象的理解:
    要明白Node层为什么能实现跨域,首先要明白一个原理:跨域问题是游览器的同源策略的安全机制引起的服务器之间是不存在跨域问题的这也不是说服务器之间没有安全机制,只是服务器之间的调用无论是通过http访问还是通过rpc调用都是协议层面的机制,并没有限制必须同源。这也就是Node层跨域的实质,我们把静态文件和Node中间层放在同一个域下,这样前端资源和Node层的通信不会受同源策略影响,然后,我们通过Node中间层把前端的资源请求转发到真实的请求地址,在通过中间层把请求返回的数据传给前端,这样就实现了此域跨彼域的串门操作。

二、相关实例操作

2.1 实例一:如何做请求合并转发

使用express中间件multifetch可以将请求批量合并
使用express+http-proxy-middleware实现接口代理
不使用第三方模块,手动实现一个nodejs代理服务器,实现请求合并转发

2.1.1 实现思路

搭建http服务器,使用Node的http模块的createServer方法;
接收客户端发送的请求,就是请求报文,请求报文中包括请求行、请求头、请求体;
将请求报文发送到目标服务器,使用http模块的request方法。

2.1.2 实现步骤

第一步:http服务器搭建

const http = require("http");
const server = http.createServer();
server.on("request",(req,res)=>{    
	res.end("hello world")
})
server.listen(3000,()=>{    
	console.log("running");
})

第二步:接收客户端发送到代理服务器的请求报文

const http = require("http");
const server = http.createServer();
server.on("request",(req,res)=>{    
	// 通过req的data事件和end事件接收客户端发送的数据    
	// 并用Buffer.concat处理一下    
	//    
	let postbody = [];    
	req.on("data", chunk => {        
		postbody.push(chunk);    
	})   
	req.on("end", () => {        
		let postbodyBuffer = Buffer.concat(postbody);        
		res.end(postbodyBuffer)    
	})
})
server.listen(3000,()=>{    
	console.log("running");
})

    这一步主要数据在客户端到服务器端进行传输时,在nodejs中需要用到buffer来处理一下。处理过程就是将所有接收的数据片段chunk塞到一个数组中,然后,将其合并到一起还原出源数据。合并方法需要用到Buffer.concat,这里不能使用加号,加号会隐式的将buffer转化为字符串,这种转化不安全。
第三步:使用http模块的request方法,将请求报文发送到目标服务器
第二步已经得到了客户端上传的数据,但是缺少请求头,所以在这一步,根据客户端发送的请求需要构造请求头,然后发送

const http = require("http");
const server = http.createServer(); 

server.on("request", (req, res) => {    
	var { connection, host, ...originHeaders } = req.headers;    
	var options = {        
		"method": req.method,        
		// 随表找了一个网站做测试,被代理网站修改这里        
		"hostname": "www.nanjingmb.com",        
		"port": "80",        
		"path": req.url,        
		"headers": { originHeaders }    
}    
//接收客户端发送的数据    
var p = new Promise((resolve,reject)=>{        
	let postbody = [];        
	req.on("data", chunk => {            
		postbody.push(chunk);        
	})        
	req.on("end", () => {            
	let postbodyBuffer = Buffer.concat(postbody);            
	resolve(postbodyBuffer)        
	})    
});    
//将数据转发,并接收目标服务器返回的数据,然后转发给客户端    
p.then((postbodyBuffer)=>{        
	let responsebody=[]        
	var request = http.request(options, (response) => {            
		response.on("data", (chunk) => {                
			responsebody.push(chunk)            
		})            
		response.on("end", () => {                
			responsebodyBuffer = Buffer.concat(responsebody)
			res.end(responsebodyBuffer);            
		})        
	})        
	// 使用request的write方法传递请求体        
	request.write(postbodyBuffer)        
	// 使用end方法将请求发出去        
	request.end();    
  })
});
server.listen(3000, () => {    
	console.log("runnng");
}) 
最后

    在网上找的相关例子都是,代码片段,没有完整的项目,看的我云里雾里的(PS:也可能是我理解和动手能力太差了吧o(╥﹏╥)o)。翻了好多资料,还好找到两位大佬的博客(Keyon Yjsliang),继续填坑。KeyonY大佬的Node中间实践,全系列有五篇,可以细细了解,并且附有node中间层项目,开箱即用,终于,满足了我动手小白的需求。jsliang的Node实践,是从0基础到实战企业官网,从最开始的到项目线上部署,大概也就几万字吧,包括后端部分,非常详细具体。

参考博客:
3-10 说说你理解的node 中间层怎样做的请求合并转发? https://www.cnblogs.com/ifon/p/15991399.html
两种简单的Node.js转发服务实现 https://zhuanlan.zhihu.com/p/392845487
使用Nodejs进行反向代理 https://blog.51cto.com/u_12879490/1921947
nodejs接口转发 https://blog.51cto.com/xutongbao/5432318
跨域解决方案之Node中间层 https://juejin.cn/post/6844903895030824974
node中间件接口转发,从此跨域问题无需再麻烦后端同学 https://juejin.cn/post/6844904151042752525

  • 5
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
对于uni-app中的跨域问题,可以通过以下几种方式解决: 1. 使用代理:在uni-app的配置文件vue.config.js中配置proxyTable,将请求代理到后端接口。示例代码如下: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 后端接口地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 2. 后端设置CORS:在后端接口中设置CORS(跨域资源共享)头部信息,允许前端跨域请求。示例代码如下(使用Node.js Express框架): ```javascript const express = require('express'); const app = express(); // 设置CORS头部信息 app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); next(); }); // 处理接口请求 app.get('/api/example', (req, res) => { // 处理业务逻辑 res.json({ message: 'Hello World' }); }); // 启动服务器 app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 3. JSONP请求:如果后端接口支持JSONP,可以使用uni-app中的jsonp插件进行跨域请求。示例代码如下: ```javascript import jsonp from 'jsonp'; // 发起JSONP请求 jsonp('http://example.com/api', { param: 'callback' }, (err, data) => { if (err) { console.error(err); } else { console.log(data); } }); ``` 以上是解决uni-app中跨域问题的常见方法,选择合适的方式进行解决即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值