Express.js + Fetch API：Cookie 操作入门

2023-09-13 14:56:08

在Web开发中，Cookie 是一种存储机制，用于保存用户在访问网站时的临时数据。这些数据可以是用户偏好、登录状态等。Express.js 作为Node.js的一个流行框架，提供了一系列处理HTTP请求和响应的方法；而Fetch API 则是一种现代JavaScript方法，用于发送网络请求并接收响应。本文将深入探讨如何在 Express.js 中设置 Cookie，并使用 Fetch API 在客户端读取这些 Cookie。

设置Cookie

首先，在Express.js中设置Cookie是一个简单的过程。开发者可以利用res.cookie()方法来添加新的Cookie，或者更新现有的Cookie。

示例代码

const express = require('express');
const app = express();

app.get('/set-cookie', (req, res) => {
  // 设置名为user的Cookie，值为'John Doe'
  res.cookie('user', 'John Doe', { maxAge: 900000, httpOnly: true });
  res.send('Set a cookie!');
});

app.listen(3000);

解析

上述代码片段中，res.cookie() 方法接收三个参数：Cookie名称、值以及选项对象。选项中的 maxAge 定义了Cookie的过期时间（以毫秒为单位），而 httpOnly 则确保Cookie不会被JavaScript访问，防止XSS攻击。

使用Fetch API读取Cookie

在客户端，Fetch API可以用来发送请求并接收响应。由于 Fetch API 不直接支持处理Cookie，因此需要设置合适的HTTP头部来让服务器知道携带的Cookie信息。

示例代码

fetch('http://localhost:3000/set-cookie', {
  credentials: 'include' // 确保请求包含当前站点的Cookies
}).then(response => response.text())
  .then(data => console.log(data))

在这个示例中，credentials: 'include' 参数是关键，它告诉 Fetch API 在发送请求时携带Cookies。这在与服务器通信以获取需要身份验证的数据时特别有用。

安全考虑

处理Cookie时需注意安全性。使用 httpOnly 标志可以防止JavaScript访问Cookie，从而减少XSS攻击的风险。此外，始终通过HTTPS发送数据以保护Cookie不被中间人截获。

示例代码：启用 HTTPS

确保服务器配置了SSL证书，并在应用程序中使用：

const https = require('https');
const fs = require('fs');

const options = {
  key: fs.readFileSync('/path/to/key.pem'),
  cert: fs.readFileSync('/path/to/cert.pem')
};

https.createServer(options, app).listen(3000);