express 基本使用

Nodejs 第二十九章（express）
Nodejs 第三十章（防盗链）

1. 安装

pnpm init
pnpm add express

配置package.json

  "main": "app.js","type":"module",

2. 使用

1. 监听端口

app.js

// 引入
import express from 'express';
// 实例
const app = express();
// 监听3000 端口
app.listen(3000, () => {console.log('Server is running on port 3000')
})

执行命令

node app.js

控制台输出

Server is running on port 3000

2. 基本的get和post请求

/app.js

import express, { json } from 'express';const app = express();app.get('/login',(req,res)=>{// http://localhost:3000/login?name=liliconsole.log(req.query)  // { name: 'lili' }res.send('login page')
})app.get('/reg/:user',(req,res)=>{// http://localhost:3000/reg/lilyconsole.log(req.params) // { user: 'lily' }res.send('reg page')
})app.use(json())
// post 要接收json数据，需要配置 app.use(json())
app.post('/list',(req,res)=>{// http://localhost:3000/list   数据: {"username": "jack"}console.log(req.body) // { username: 'jack' }res.send('list page')
})app.listen(3000, () => {console.log('Server is running on port 3000')
})

3. 使用路由

./src/list.js

import express from 'express';const router = express.Router();router.post('/list',(req,res)=>{if (req.body.username == 'jack')// 服务器返回json格式数据res.json({code: 1,message: 'success',data: []})else{res.json({code:0,message: 'fail'})}
})export default router;

./src/user.js

import express from "express";
const router = express.Router();router.get("/login", (req, res) => {res.send("login page");
});router.get("/reg/:user", (req, res) => {res.send("reg page");
});export default router;

app.js

import express, { json } from 'express';
// 引入两个路由
import User from './src/user.js'
import List from './src/list.js'const app = express();
app.use(json())
// 挂载路由，用户访问时路径不同，使用的路由不同
app.use('/',User)
app.use('/api',List)app.listen(3000, () => {console.log('Server is running on port 3000')
})

4. 中间件

**作用：**所有请求都会先通过中间件进行处理

./middleware/middle.js

const middleware = (req,res,next)=>{console.log('所有请求都会经过中间件')next()	// 必须有next，不然会卡在这里
}export default middleware

./app.js

import express, { json } from 'express';
// 引入中间件
import middleware from './middleware/middle.js'
const app = express();
// 使用中间件,必须在路由前面
app.use(middleware)

5. 在中间件中记录日志

安装log4js

pnpm add log4js

配置log4js

./middleware/logger.js

import log4js from 'log4js';
// 配置log4js
log4js.configure({// 输出方式appenders:{// 在控制台输出out:{type:'stdout',layout:{  // 控制台输出的样式type:'colored'   // 输出颜色}},// 在文件中输出file:{type:'file',filename:'./log/server.log',// filename:'./server.log',}},// 配置记录，什么样级别的事件，要如何处理    categories:{// 默认配置：debug级别，并且在控制台和文件中都输出default:{appenders:['out','file'],level:'debug'}}
})export default log4js.getLogger('default')

在中间件中使用日志记录

./middleware/middle.js

// 使用日志记录
import logger from './logger.js'
const middleware = (req,res,next)=>{// 日志中记录请求的方法和请求的地址。// logger.debug，调用事件记录，记录到debug的事件中logger.debug(`[${req.method}]${req.url}`)next()
}export default middleware

3. 防盗链

作用： 防止其他人使用本站的静态资源

在请求头的referer记录请求静态资源的网址，需要比对referer中的值，制作可以访问静态资源的白名单

req.get('referer')	// 获取请求头中referer的值

import express, { json } from "express";
const app = express();
// 静态资源访问的白名单
const httpList = ["localhost"];
const placeStolenLinks = (req, res, next) => {// referer:请求来源const referer = req.get("referer");// 判断请求来源是否为 httpList中的地址if (referer) {const url = new URL(referer);const hostname = url.hostname;// 从referer中解析出主机名if (!httpList.includes(hostname)) {return res.status(403).send("非法请求");}}next();
};
app.use(placeStolenLinks);
// 设置静态资源访问的文件夹
app.use(express.static("public"));app.listen(3000, () => {console.log("Server is running on port 3000");
});

4. cors

CORS（Cross-Origin Resource Sharing，跨源资源共享）是一种安全机制，用于限制一个域上的网页如何与另一个域上的资源进行交互。当一个网页尝试从不同的源（协议、域名或端口）请求资源时，浏览器会实施同源策略，阻止这种请求，除非服务器明确允许。

1. 同源策略

app.js

import express from "express";const app = express();app.get('/',(req, res)=>{res.json({message: "Hello World"})
})
app.listen(3000, () => console.log("Server is running on port 3000"));

index.html
- 网页通过fetch发送请求，默认发送的是get请求

<script>fetch('http://localhost:3000').then(res => res.json()).then(data => console.log(data))
</script>

浏览器发生错误
- 浏览器与请求的地址，域名和端口不同触发了浏览器的同源策略，无法发送请求

Access to fetch at 'http://localhost:3000/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

2. 简单请求

对于请求方法是：GET、HEAD、POST
请求头：仅包含以下几种：Accept、Accept-Language、Content-Language、Content-Type（仅限于 application/x-www-form-urlencoded、multipart/form-data、text/plain）

app.use('*',(req,res,next)=>{// 所有来源都同意，缺点：无法设置session，一般不用这种方法// res.setHeader("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Origin", "http://127.0.0.1:5500")next()
})

说明：
1. res.setHeader：nodejs提供的原生方法
2. res.header：express提供的方法。返回res对象，支持链式调用

浏览器响应头中的数据：

3. 预检请求

触发预检请求的条件：
1. 请求方法不是：GET、HEAD、POST
2. Content-Type的值不是 application/x-www-form-urlencoded、multipart/form-data、text/plain这3个

发送除GET、HEAD、POST之外的请求

发送patch请求

  fetch('http://localhost:3000/patch',{method:'PATCH'}).then(res => res.json()).then(data => console.log(data))

浏览器错误

Access to fetch at 'http://localhost:3000/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response.

解决方法

app.use('*',(req,res,next)=>{res.header("Access-Control-Allow-Origin", "http://127.0.0.1:5500")// 设置可以通过同源策略的请求方法res.header("Access-Control-Allow-Methods", "PUT,DELETE,PATCH")next()
})
app.patch('/patch',(req, res)=>{res.json({message: "patch request"})
})

浏览器响应头的数据
浏览器网络请求中的预检

Content-Type的值

请求体中 ‘content-type’: ‘application/json’

  fetch('http://localhost:3000', {headers: {'Content-Type': 'application/json'},body: JSON.stringify({name: "xiaoming"}),method: 'POST'}).then(res => res.json()).then(data => console.log(data))

浏览器报错

Access to fetch at 'http://localhost:3000/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

解决方法

app.use('*',(req,res,next)=>{res.header("Access-Control-Allow-Origin", "http://127.0.0.1:5500")res.header("Access-Control-Allow-Methods", "PUT,DELETE,PATCH")// 允许客户端在实际请求中使用 Content-Type 请求头res.header("Access-Control-Allow-Headers", "Content-Type")next()
})
app.post('/post',(req,res)=>{console.log(req.body)res.json({message: "post request"})
})

浏览器的响应体
同样触发了预检

4. 自定义响应头

定义响应头

app.get('/',(req, res)=>{// 自定义响应头res.set('self-defined-header', '123456')// 设置Access-Control-Expose-Headers，将自定义的响应头抛出res.header('Access-Control-Expose-Headers', 'self-defined-header')res.json({message: "Hello World"})
})

接收

fetch('http://localhost:3000').then(res => {// 通过res.headers.get获取到响应头console.log(res.headers.get('self-defined-header'))return res.json()}).then(data => console.log(data))

在这里插入图片描述

5. 单工通讯sse

作用： 后端可以一直给前端发数据，前端只在请求时给后端发一次数据

后端

app.get('/sse',(req,res)=>{// 设置响应头res.header('Content-Type','text/event-stream')// 每隔一秒发送一次消息setInterval(()=>{res.write('data: ' + new Date() + '\n')},1000)
})

前端

<script>const sse = new EventSource('http://localhost:3000/sse')// 默认监听的类型是message，可以在后端改，没必要sse.addEventListener('message',(e)=>{console.log(e.data)})
</script>