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=lili
  console.log(req.query)  // { name: 'lili' }
  res.send('login page')
})

app.get('/reg/:user',(req,res)=>{
  // http://localhost:3000/reg/lily
  console.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. 在中间件中记录日志

1. 安装log4js

pnpm add log4js

2. 配置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')

3. 在中间件中使用日志记录

• ./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个

1. 发送除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"})
})

• 浏览器响应头的数据

  

• 浏览器网络请求中的预检
  

2. 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. 自定义响应头

1. 定义响应头

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"})
})

2. 接收

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>

• 效果