运行在服务端的JavaScript——node.js（五）

中间件

中间接的概念

Express 中间件的调用流程

当一个请求到达Express的服务器之后，可以连续调用多个中间件，从而对这次请求进行预处理。
image


Express中间件的格式

Express的中间件，本质上就是function处理函数，Express中间件的格式如下：

中间件函数的形参列表中，必须包含next参数。而路由处理函数中只包含req和res

next函数的作用

next函数是实现多个中间连续调用的关键，它表示把流转关系转交给下一个中间件或路由。
image

Express 中间件的初体验

定义中间件函数

可以通过如下方式，定义一个最简单的中间件函数：

// 常量 mw 所指向的，就是一个中间件函数
const mw = function(req,res,next){
    console.log('这是一个最简单的中间件函数')；
    // 注意：当前中间件的业务处理完毕后，必须调用next()函数
    // 表示把流转关系转交给下一个中间件或路由
    next()
}

全局生效的中间件

客户端发起的任何请求，到达服务器之后，都会触发的中间件，叫做全局生效的中间件。
通过调用app.use(中间件函数)，即可定义一个全局生效的中间件，示例代码如下：

// 常 mw 所指向的，就是一个中间件函数
const mw = function(req,res,next){
    console.lgo('这是最简单的中间件函数')
    next()
}

// 全局生效的中间件
app.use(mw)

定义全局中间件的简化形式

// 全局生效的中间件
app.use(function(req,res,next){
    console.log('这是一个最简单的中间件函数')
    next()
})

中间件的作用

多个中间件之间，共享一份req和res。基于这样的特性，我们可以在上游的中间件中，统一为req或res对象添加自定义的属性和方法，供下游的中间件或路由进行使用。

image

定义多个中间件

可以使用app.use()连续定义多个全局中间件。客户端请求到达服务器之后，会按照中间件定义的先后顺序依次进行调用。

局部生效的中间件

不使用app.use()定义的中间件，叫做局部生效的中间件，示例代码如下：

// 定义中间件函数 mw1
const mw1 = function(req,res,next){
    console.log('这是中间件函数')
    next()
}
// mw1 这个中间路由只在“当前路由中生效”，这种用法属于“局部生效的中间件”
app.get('/',mw1,function(req,res){
    res.send('Home page.')
})
// mw1 这个中间件不会影响下面这个路由
app.get('/user',function(req,res){res.send('User page')})

定义多个局部中间件

可以在路由中，通过如下两种等价方式，使用多个局部中间件：

// 以下两种写法是“完全等价”的，可以根据自己的喜好，选择任意一种方式进行使用
app.get('/',mw1,mw2,(req,res)=>{ res.send('Home page') })
app.get('/',[mw1,mw2],(req,res)=>{res.send('Home.page')})

了解中间件的五个使用注意事项

  1. 一定要在路由之前注册中间件

  2. 客户端发送过来的请求，可以连续调用多个中间件进行处理

  3. 执行完中间件的业务代码之后，不要忘记调用next()函数

  4. 为了防止代码逻辑混乱，调用完next()函数后不要再写额外代码

  5. 连续调用多个中间件时，多个中间件之间，共享req和res对象

中间件的分类

为了方便理解和记忆中间件的使用，Express官方把常见的中间件用法，分成了5大类，分别是：

  1. 应用级别的中间件

  2. 路由级别的中间件

  3. 错误级别的中间件

  4. Express 内置的中间件

  5. 第三方的中间件

应用级别的中间件

通过 app.use()或app.get()或app.post()，绑定到app实例上的中间件，叫做应用级别的中间件，代码示例如下：

// 应用级别的中间件（全局中间件）
app.use((req,res)=>{
    next()
})

// 应用级别的中间件（局部中间件）
app.get('/',mw1,(req,res)=>{
    res.send('Home page.')
})

路由级别的中间件

绑定到 express.Router()实例上的中间件，叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不过，应用级别中间件时绑定到app实例上，路由级别中间件绑定到router实例上，代码示例如下：

var app = express()
var router = express.Router()

// 路由级别的中间件
router.use(function(req,res,next){
    console.log('Time',Date.now())
    next()
})

app.use('/',router)

错误级别中间件

错误级别中间件的作用：专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题。
格式：错误级别中间件的 function 处理函数中，必须有四个形参，形参从前到后，分别是（err,req,res,next）。

app.get('/',function(req,res){ // 路由
    throw new Error('服务器内部发生了错误！')
    res.send('Home Page.')
})
app.use(function(err,req,res,next){
    console.log('发生了错误'+err.message) // 错误级别的中间件
    console.log('发生了错误：'+err.message) // 在服务器打印错误消息
    res.send('Error! '+ err.message) // 向客户端响应错误相关的内容
})

CORS跨域资源共享

接口的跨域问题

未经过处理的GET和POST接口，存在一个很严重的问题：不支持跨域请求。
解决接口跨域问题的方案主要有两种：

  1. CORS（主流解决方案，推荐使用）
  2. JSONP（有缺陷的解决方案：只支持GET请求）

使用 cors 中间件解决跨域问题

cors是Express的一个第三方中间件，通过安装和配置cors中间件，可以很方便地解决问题。
使用分为如下三步：

  1. 运行 npm install cors 安装中间件
  2. 使用const cors = require("cors")导入中间件
  3. 在路由之前调用 app.use(cors()) 配置中间件

什么是CORS

CORS（Corss-Origin Rosource Sharing, 跨域资源共享）由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。

浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了CORS相关的HTTP响应头，就可以解除浏览器端的跨域访问限制。

image


CORS的注意事项

  1. CORS 主要在服务端进行配置。客户端浏览器无需做任何而外的配置，即可请求开启CORS的接口。

  2. CORS 在浏览器中有兼容性问题。只有支持XMLHttpRequest Level2的浏览器，才能正常访问开启了CORS的服务端接口（例如：IE10+、Chrome4+、FireFox3.5+）。

CORS 响应头部 -Access-Control-Allow-Origin 字段，其语法格式如下：

Access-Control-Allow-Originn:<origin>|*

其中，origin参数的值指定了允许访问该资源的外域URL。

例如，下面的字段将只允许来自 http://www.baidu.com 的请求：

res.setHeader('Access-Control-Allow-Orgin','http://www.baidu.com')

如果指定了 Access-Control-Allow-Origin 字段的值为通配符*，表示允许来自任何域的请求，示例代码如下：

res.setHeader('Access-Control-Allow-Origin','*')

CORS 响应头 -Access-Control-Allow-Headers

默认情况下，CORS仅支持客户端向服务器发送如下9个请求头：
Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type(值仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一)

如果客户端向服务器发送了额外的请求头信息，则需要在服务端，通过Access-Control-Allow-Header 对额外的请求头进行声明，否则这次请求会失败！

// 允许客户端额外向服务器发送 Content-Type 请求头和X-Custom-Header 请求头
// 注意：多个请求头之间使用英文的逗号进行分隔
res.setHeader('Access-Control-Allow-Headers','Content-Type,X-Custom-Header')

CORS 响应头部 -Access-Control-Allow-Methods

默认情况下，CORS仅支持客户端发起 GET、POST、HEAD 请求。

如果客户端希望通过PUT、DELETE等方式请求服务器的资源，则需要在服务器端，通过Access-Content-Allow-Methods 来指明实际请求所允许使用的HTTP方法。
示例代码如下：

// 只允许 POST、GET、DELETE、HEAD 请求方法
res.setHeader('Access-Content-Allow-Methods','POST, GET, DELETE, HEAD')
// 允许所有的 HTTP 请求方法
res.setHeader('Access-Control-Allow-Methods','*')

CORS请求的分类

客户端在请求CORS接口时，根据请求方式和请求头的不同，可以将CORS的请求分为两大类，分别是：

  1. 简单请求

  2. 预检请求

简单请求

同时满足一下两大条件，就属于简单请求：

  1. 请求方式：GET、POST、HEAD 三者之一

  2. HTTP头部信息不超过一下几种字段：无定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type(值仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一)

预检请求

只要符合以下任何一个条件的请求，都需要进行预检请求：

  1. 请求方式为GET、POST、HEAD之外的请求Method类型
  2. 请求头中包含自定义头部字段
  3. 向服务器发送了application/json 格式的数据

在浏览器与服务器正式通信之前，浏览器会先发送OPTION请求进行预检，已获知服务器是否允许该实际请求，所以这一次的OPTION请求为“预检请求”。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据。

CORS简单请求和预检请求的区别

简单请求的特点：客户端与服务器之间只会发送一次请求。
预检请求的特点：客户端与服务器之间会发送两次请求，OPTION预检请求成功之后，才会发起真正的请求。

JSONP接口

JSONP的概念与特点

概念：浏览器端通过<script>标签的src属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做JSONP。
特点：

  1. JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象。

  2. JSONP 仅支持GET请求，不支持POST、PUT、DELETE等请求。


创建JSONP接口的注意事项

如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明JSONP的接口。否则JSONP接口会被处理成开启了CORS的接口。实例diamante如下：

// 优先创建JSONP接口【这个接口不会被处理成CORS接口】
app.get('/api/jsonp',(req,res)=>{ })

// 再配置 CORS 中间件【后续的所有接口，都会被处理成CORS接口】
app.use(cors())

// 这是一个开启了 CORS 的接口
app.get('/api/get',(req,res)=>{ })

实现JSONP接口的步骤

  1. 获取客户端发送过来的回调函数的名字
  2. 得到要通过JSONP形式发送给客户端的数据
  3. 根据前两步得到的数据，拼接出一个函数调用的字符串
  4. 把上一步拼接得到的字符串，响应给客户端<script>标签进行解析执行

    // 得到要通过JSONP形式发送给客户端的数据
    const data = { name:'zs',age:22 }
posted @ 2022-05-27 13:33  maplerain  阅读(40)  评论(0)  编辑  收藏  举报