目录
CORS响应头部 - Access-Control-Allow-Origin
CORS响应头部 - Access-Control-Allow-Headers
CORS响应头部 - Access-Control-Allow-Methods
Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。Express的作用和Node.js内置的http模块类似，是专门用来创建 Web服务器的。Express 的本质实际上就是一个npm上的第三方包，提供了快速创建Web服务器的便捷方法。
Win + R 输入cmd ，在终端中运行：
npm i express@4.17.1 //导入express
const express = require('express')
// 创建web服务器
const http = express()
// 通过 app.get() 方法，可以监听客户端的 GET 请求，具体的语法格式如下：
/*
http.get('请求的URL地址',(req,res)=>{})
第一个参数是客户端请求的URL地址
第二个参数是请求对应的处理函数
req:请求对象（包含了与请求相关的属性和方法）
res:响应对象（包含了与响应相关的属性和方法）
*/
http.get('/user', (req, res) => {
res.send({ uname: '张三', age: 18, sex: '男' })
// 通过 res.send() 方法向客户端发送JSON对象
})
// 通过 app.post() 方法，可以监听客户端的 POST 请求，具体的语法格式如下：
/*
http.post('请求的URL地址',(req,res)=>{})
*/
http.post('/user', (req, res) => {
res.send('请求成功')
// 通过 res.send() 方法向客户端发送文本内容
})
// 获取URL中携带的查询参数，如 ？name=zs&&age=20 ,req.query默认是一个空对象，若有查询参数则返回一个对象
http.get('/', (req, res) => {
res.send(req.query)
// 通过 req.query 对象，可以访问到客户端通过查询字符串的形式，发送到服务器的参数：
})
//获取URL中的动态参数 req.query默认也是一个空对象
http.get('/user/:id', (req, res) => {
res.send(req.query)
// URL地址中可以通过 ：参数名 的形式，匹配动态参数值
})
http.listen(8081, () => {
console.log('express server running at http://127.0.0.1:8081')
})express提供了一个非常好用的函数，叫做express.static()，通过它，我们可以非常方便地创建一个静态资源服务器，例如，通过如下代码就可以将 public目录下的图片、CSS文件、JavaScript文件对外开放访问了：
const express = require('express')
const http = express()
http.use(express.static('./clock'))
http.listen(8080, (req, res) => {
console.log('express server running at http://127.0.0.1:8080')
})
//在浏览器中输入：http://127.0.0.1:8080/index.html 就能访问到clock文件夹中的文件啦如果要托管多个静态资源目录，请多次调用express.static()函数,访问静态资源文件时，express.static() 函数会根据目录的添加顺序查找所需的文件。
如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式：
http.use('/public', express.static('./clock'))
//此时需要在浏览器中输入：http://127.0.0.1:8080/public/index.html 才能访问到clock文件夹中的文件在编写调试Node.js项目的时候，如果修改了项目的代码，则需要频繁的手动close掉，然后再重新启动，非常繁琐。
现在，我们可以使用nodemon（nodemon - npm）这个工具，它能够监听项目文件的变动，当代码被修改后，nodemon会自动帮我们重启项目，极大方便了开发和调试。
在终端中，运行如下命令，即可将nodemon安装为全局可用的工具：
npm install -g nodemon当基于Node.js编写了一个网站应用的时候，传统的方式，是运行node app.js 命令，来启动项目。这样做的坏处是：代码被修改之后，需要手动重启项目。
现在，我们可以将node命令替换为nodemon命令，使用nodemon app.js 来启动项目。这样做的好处是：代码被修改之后，会被nodemon监听到，从而实现自动重启项目的效果。
node app.js
//将上面的终端命令替换为下面的，即可在更改代码保存之后自动重启服务器
nodemon app.js 在Express中，路由指的是客户端的请求与服务器处理函数之间的映射关系。
Express中的路由分3部分组成，分别是请求的类型、请求的 URL 地址、处理函数，格式如下：
app.method(path,function)为了方便对路由进行模块化的管理，Express不建议将路由直接挂载到app上，而是推荐将路由抽离为单独的模块。
单独创建一个路由模块，命名为router.js
const express = require('express') // 导入express
const router = express.Router() // 创建路由对象
router.get('/user/list', (req, res) => {
res.send('success get user list')
})
router.post('/user/add', (req, res) => {
res.send('success add user')
})
module.exports = router //向外导出路由对象在另一个文件中去调用这个路由模块
const express = require('express')
const http = express()
// 导入路由模块
const router = require('./03.router')
http.use(router)
//http.use()函数的作用就是用来注册全局中间件
http.listen(8080, () => {
console.log('server running at http://127.0.0.1:8080')
})此时在本地客户端浏览器中访问http://127.0.0.1:8080/user/list和http://127.0.0.1:8080/user/add就能拿到服务器响应回来的数据
类似于托管静态资源时，为静态资源统一挂载访问前缀一样，路由模块添加前缀的方式也非常简单：
http.use('/api', router)此时就需要在本地客户端浏览器中访问http://127.0.0.1:8080/api/user/list和http://127.0.0.1:8080/api/user/add才能拿到服务器响应的数据
中间件（Middleware），特指业务流程的中间处理环节。Express 的中间件，本质上就是一个function 处理函数，中间件函数的形参列表中，必须包含 next 参数。而路由处理函数中只包含req 和 res。
next 函数是实现多个中间件连续调用的关键，它表示把流转关系转交给下一个中间件或路由。
const express = require('express')
const http = express()
//中间件函数
const mw = (req, res, next) => {
console.log('中间件函数')
//在中间件的业务处理完毕后会调用next函数转交给下一个中间件或路由执行
next()
}
http.use(mw) //通过调用 app.use(中间件函数)，即可定义一个全局生效的中间件
//客户端发起的任何请求，到达服务器之后，都会触发的中间件，叫做全局生效的中间件
http.get('/user/list', (req, res) => {
console.log('get list')
})
http.get('/user/score', (req, res) => {
console.log('get score')
})
http.listen(8080, () => {
console.log('server running at http://127.0.0.1:8080')
})当客户端访问时，会先经过中间件函数（打印出'中间件函数'），再根据请求方式和请求地址匹配找到对应的路由处理函数执行相应操作
全局中间件的简化写法
http.use((req,res,next) => {
console.log('中间件函数')
next()
})可以使用 app.use()连续定义多个全局中间件。客户端请求到达服务器之后，会按照中间件定义的先后顺序依次进行
不使用 app.use() 定义的中间件，叫做局部生效的中间件，示例代码如下：
const express = require('express')
const http = express()
const mw = (req, res, next) => {
console.log('局部中间件')
next()
}
http.get('/index', mw, (req, res) => {
console.log('INDEX')
})
//这里有三个参数，其中第二个参数就是定义的局部中间件，当访问这个地址时会先经过中间件处理
http.get('/user', (req, res) => {
console.log('USER')
})
http.listen(8080, () => {
console.log('server running at http://127.0.0.1:8080')
})定义多个局部中间件
http.get('/index', mw1, mw2, (req, res) => {})中间件的5个使用注意事项
①一定要在路由之前注册中间件
②客户端发送过来的请求，可以连续调用多个中间件进行处理
③执行完中间件的业务代码之后，不要忘记调用 next()函数
④为了防止代码逻辑混乱，调用 next()函数后不要再写额外的代码
⑤连续调用多个中间件时，多个中间件之间，共享req和res对象
通过 http.use()或http.get() 或 http.post() ，绑定到 http 实例上的中间件，叫做应用级别的中间件
http.user((req,res,next) => {
next()
}) // 全局中间件
http.get('/',mw1,(req,res) => {}) // 局部中间件绑定到express.Router() 实例上的中间件，叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不过，应用级别中间件是绑到 http实例上，路由级别中间件绑定到 router实例上，代码示例如下：
const express = require('express')
const router = express.Router()
router.user((req,res,next) => {
next()
})
http.use('/',router)错误级别中间件的作用：专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题。
格式：错误级别中间件的function处理函数中，必须有 4 个形参，形参顺序从前到后，分别是(err,req, res, next)。
错误级别的中间件，必须注册在所有路由之后！
const express = require('express')
const http = express()
http.get('/api', (req, res) => {
throw new Error('服务器内部发生了错误')
res.send('API')
}) // 路由在发出get请求时抛出错误
http.use((err, req, res, next) => {
console.log('错误:' + err.message)
res.send('Error:' + err.message)
}) // 立马被错误中间件捕获，弹出错误提示
http.listen(8080, () => {
console.log('server running at http://127.0.0.1:8080')
})自Express4.16.0 版本开始，Express内置了3 个常用的中间件，极大的提高了Express项目的开发效率和体验：
① express.static 快速托管静态资源的内置中间件，例如：HTML 文件、图片、CSS样式等（无兼容性）
② express.json 解析JSON格式的请求体数据（有兼容性，仅在4.16.0+版本中可用）
const express = require('express')
const http = express()
// 在路由之前配置解析 JSON 格式的请求体数据的中间件
http.use(express.json())
http.post('/add', (req, res) => {
res.send('Add and success')
// 在服务器可以使用req.body来接收客户端发送过来的请求体数据（JSON 格式）
console.log(req.body)
// 默认情况下，如果不配置解析表单数据的中间件，req.body的值为undefined
})
http.listen(8080, () => {
console.log('server running at http://127.0.0.1:8080')
})
客户端通过post请求向服务器发送json格式的数据{"name": "张三","age" : 18}，当我们未配置解析中间件时，我们可以看到终端输出了undefined，当我们在路由之前配置解析中间件之后可以正常打印出发送的数据
③ express.urlencoded 解析URL-encoded格式的请求体数据（有兼容性，仅在4.16.0+版本中可用）
const express = require('express')
const http = express()
// 在路由之前配置解析 express.urlencoded 格式的请求体数据的中间件
http.use(express.urlencoded({ extended: false }))
http.post('/add', (req, res) => {
res.send('Add and success')
// 在服务器可以使用req.body来接收客户端发送过来的请求体数据（express.urlencoded 格式）
console.log(req.body)
// 默认情况下，如果不配置解析表单数据的中间件，req.body的值为undefined
})
http.listen(8080, () => {
console.log('server running at http://127.0.0.1:8080')
})
在我们完成对解析 URL-encoded格式的请求体数据中间件的配置后我们就可以正常获取所请求的数据
非Express官方内置的，而是由第三方开发出来的中间件，叫做第三方中间件。在项目中，大家可以按需下载并配置第三方中间件，从而提高项目的开发效率。
例如：在express@4.16.0之前的版本中，经常使用body-parser这个第三方中间件，来解析请求体数据。使用步骤如下：
①运行 npm install body-parser安装中间件
②使用 require 导入中间件
③调用 app.use()注册并使用中间件
const express = require('express')
const http = express()
// 导入解析表单数据（express.urlencoded格式的请求体数据）的中间件body-parser
const parser = require('body-parser')
// 使用http.use()注册中间件
http.use(parser.urlencoded({ extended: false }))
http.post('/add', (req, res) => {
console.log(req.body)
res.send('Success')
})
http.listen('8080', () => {
console.log('server running at http://127.0.0.1:8080')
})PS：Express内置的express.urlencoded中间件，就是基于body-parser这个第三方中间件进一步封装出来的。
详情看黑马教程08.中间件-自定义中间件_哔哩哔哩_bilibili
首先创建一个服务器
//导入express模块
const express = require('express')
// 创建express服务器实例
const http = express()
//在路由之前配置解析 express.urlencoded 格式的请求体数据的中间件
http.use(express.urlencoded({ extended: false }))
// 导入并注册路由模块
const router = require('./13.apiRouter.js')
http.use('/api', router)
// 启动服务器
http.listen(8080, () => {
console.log('server running at http://127.0.0.1:8080')
})单独创建一个apiRouter.js路由模块
// 路由模块
const express = require('express')
const router = express.Router()
router.get('/get', (req, res) => {
// 获取客户端通过查询字符串发送到服务器的数据
const query = req.query
// 调用res.send()把数据响应给客户端
res.send({
status: 0, // 状态: 0表示成功，1表述失败
msg: 'GET 请求成功', // 状态描述
data: query // 响应给客户端的数据
})
})
router.post('/post', (req, res) => {
// 获取客户端通过请求体发送到服务器的URL-encoded数据
const body = req.body
res.send({
status: 0,
mag: 'POST请求成功',
data: body
})
})
// 这一步一定不要忘记把这个路由共享出去
module.exports = router在Postman中测试一下
GET请求：
POST请求：
当我们创建一个HTML页面在其中分别对我们这个服务器发起GET和POST请求我们发现会报出错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<button id="btnGet">GET</button>
<button id="btnPost">POST</button>
<script>
$(function () {
$('#btnGet').on('click', () => {
$.ajax({
type: 'GET',
url: 'http://127.0.0.1:8080/api/get',
data: {
bookname: '水浒传',
author: '施耐庵'
},
success: (res) => {
console.log(res)
}
})
})
$('#btnPost').on('click', () => {
$.ajax({
type: 'POST',
url: 'http://127.0.0.1:8080/api/post',
data: {
bookname: '西游记',
author: '吴承恩'
},
success: (res) => {
console.log(res)
}
})
})
})
</script>
</body>
</html>当我们在页面中发起请求时会出现错误，这就是接口的跨域问题
刚才编写的GET和POST接口，存在一个很严重的问题：不支持跨域请求。
解决接口跨域问题的方案主要有两种：
CORS（主流的解决方案，推荐使用）
JSONP（有缺陷的解决方案：只支持GET请求）
cors是Express的一个第三方中间件。通过安装和配置cors中间件，可以很方便地解决跨域问题。
使用步骤分为如下3步：
运行 npm install cors 安装中间件
使用 const cors = require('cors') 导入中间件
在路由之前调用 http.use(cors()) 配置中间件
//导入express模块
const express = require('express')
// 创建express服务器实例
const http = express()
//在路由之前配置解析 express.urlencoded 格式的请求体数据的中间件
http.use(express.urlencoded({ extended: false }))
//导入中间件cors并注册
const cors = require('cors')
http.use(cors())
// 导入并注册路由模块
const router = require('./13.apiRouter.js')
http.use('/api', router)
// 启动服务器
http.listen(8080, () => {
console.log('server running at http://127.0.0.1:8080')
})此时我们再去发起请求就可以得到服务器返回的数据啦
CORS（Cross-OriginResource Sharing，跨域资源共享）由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源。
浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制。
①CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了 CORS的接口。
②CORS 在浏览器中有兼容性。只有支持XMLHttpRequestLevel2 的浏览器，才能正常访问开启了CORS的服务端接口（例如：IE10+、Chrome4+、FireFox3.5+）。
响应头部中可以携带一个 Access-Control-Allow-Origin字段，其语法如下
Access-Control-Allow-Origin: <origin> | * ( | 是或者)
//origin 参数的值指定了允许访问该资源的外域 URL。例如，下面的字段值将只允许来自 http://itcast.cn 的请求：
res.setHeader('Access-Control-Allow-Origin', 'http://itcast.cn')如果指定了 Access-Control-Allow-Origin字段的值为通配符*，表示允许来自任何域的请求，示例代码如下
res.setHeader('Access-Control-Allow-Origin', '*')默认情况下，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-Headers对额外的请求头进行声明，否则这次请求会失败！
//允许客户端额外向服务器发送 Content-Type 请求头和 X-Custom-Header 请求头
//多个请求头之间用英文逗号隔开
res.setHeader('Access-Control-Allow-Headers', 'Content-Type,X-Custom-Header')默认情况下，CORS仅支持客户端发起GET、POST、HEAD请求。
如果客户端希望通过PUT、DELETE等方式请求服务器的资源，则需要在服务器端，通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP方法。
//只允许POST,GET,DALETE,HEAD请求方法
res.setHeader('Access-Control-Allow-Methods', 'POST,GET,DALETE,HEAD')
//允许所有的http请求方法
res.setHeader('Access-Control-Allow-Methods', '*')客户端在请求CORS接口时，根据请求方式和请求头的不同，可以将CORS的请求分为两大类，分别是：
1.简单请求
同时满足以下两大条件的请求，就属于简单请求：
① 请求方式：GET、POST、HEAD三者之一
② HTTP 头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type（只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）
2.预检请求
只要符合以下任何一个条件的请求，都需要进行预检请求：
① 请求方式为 GET、POST、HEAD 之外的请求 Method 类型
② 请求头中包含自定义头部字段
③ 向服务器发送了 application/json 格式的数据
在浏览器与服务器正式通信之前，浏览器会先发送 OPTION 请求进行预检，以获知服务器是否允许该实际请求，所以这一次的 OPTION请求称为“预检请求”。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据。
简单请求的特点：客户端与服务器之间只会发生一次请求。
预检请求的特点：客户端与服务器之间会发生两次请求，OPTION 预检请求成功之后，才会发起真正的请求。
在这里get请求就只发生了一次请求，但delete请求却发生了两次请求，第一次预检请求不带任何参数，成功之后再发生真正的请求