如何从Node.js服务器向静态index.html发送数据并实现客户端获取请求头

1. 先确认服务器端Cookie的正确写法 #

注意是res.cookie()（单数形式），不是res.cookies，这是最容易踩的拼写坑。下面是完整的服务器配置示例：

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

// 托管静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  // 设置Cookie时的关键参数配置
  res.cookie('user_data', 'hello_from_server', {
    maxAge: 24 * 60 * 60 * 1000, // 有效期1天
    httpOnly: false, // 必须设为false，否则前端JS无法通过document.cookie读取
    secure: process.env.NODE_ENV === 'production', // 生产环境开HTTPS时设为true
    sameSite: 'Lax', // 避免跨域Cookie拦截
    path: '/' // 确保全站路径都能访问到该Cookie
  });
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

2. 客户端读取Cookie的正确方式 #

在静态index.html中直接用document.cookie读取，也可以写个解析函数提取指定Cookie：

<!DOCTYPE html>
<html lang="zh-CN">
<body>
  <script>
    // 打印所有Cookie
    console.log('当前所有Cookie:', document.cookie);

    // 提取指定名称的Cookie值
    function getCookie(name) {
      const cookieStr = `; ${document.cookie}`;
      const cookieParts = cookieStr.split(`; ${name}=`);
      if (cookieParts.length === 2) {
        return cookieParts.pop().split(';').shift();
      }
      return null;
    }

    // 读取服务器设置的user_data
    console.log('服务器发来的Cookie值:', getCookie('user_data'));
  </script>
</body>
</html>

3. 排查常见问题 #

• httpOnly参数错误：如果服务器把这个值设为true，前端JS完全无法访问该Cookie（这是防XSS的安全设置），需要前端读取的话必须设为false。
• 跨域场景的额外配置：如果前端页面和服务器不在同一域名（比如前端在localhost:8080，服务器在localhost:3000），需要：
  1. 服务器开启CORS并允许携带Cookie：

     app.use((req, res, next) => {
       res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); // 允许的前端域名
       res.header('Access-Control-Allow-Credentials', true); // 允许请求携带Cookie
       next();
     });
     

  2. 前端请求时要带上credentials参数（以fetch为例）：

     fetch('http://localhost:3000/', { credentials: 'include' })
       .then(res => res.text())
       .then(() => console.log('请求完成，Cookie已设置'));
     

• secure参数不匹配环境：本地HTTP环境下secure必须设为false，生产HTTPS环境下要设为true，否则Cookie不会被浏览器保存。
• 路径（Path）设置错误：如果设置了非/的路径，只有访问对应路径下的资源时Cookie才会生效，确保路径符合需求。

4. 调试技巧 #

• 打开浏览器开发者工具（F12），切换到Application标签，查看Cookies目录下是否存在服务器设置的Cookie：如果没有，说明服务器端设置有问题；如果有但前端读不到，检查httpOnly参数。
• 查看网络请求的响应头，确认Set-Cookie字段是否存在，参数是否和服务器配置一致。

内容的提问来源于stack exchange，提问作者Gauri Yadav