Nodejs服务器页面cookie读写限制问题：只能读写Node.js服务器其它页面设置的cookie

Nodejs服务器页面cookie读写限制问题：只能读写Node.js服务器其它页面设置的cookie

有没有人碰到过这种情况：node.js服务器页面读写cookie只能读写node.js服务器其它页面设置的cookie,而客户端html使用JS读写cookie时只能读写客户端其它html页面设置的cookie…怎样使node.js服务器页面能读取客户端HTML页面设置的cookie? 大家有没有思路或者实例？

4 回复

Node.js 服务器页面 Cookie 读写限制问题

摘要

在 Node.js 中，服务器端代码（如 Express.js）可以读取和写入客户端浏览器中的 Cookie。然而，客户端 JavaScript（例如在 HTML 页面中运行的脚本）也有自己的机制来读取和写入 Cookie。这两者之间存在一定的隔离性，即服务器端代码只能读写由服务器端设置的 Cookie，而客户端 JavaScript 只能读写由客户端 JavaScript 设置的 Cookie。

问题描述

在实际开发过程中，开发者可能会遇到这样的问题：当尝试通过 Node.js 服务器端代码读取或写入客户端 HTML 页面通过 JavaScript 设置的 Cookie 时，会发现无法成功读取或写入这些 Cookie。这主要是因为服务器端和客户端的 Cookie 是独立管理的。

解决方案

示例代码

1. 通过 Node.js 服务器设置 Cookie

// 使用 Express.js 作为 Node.js 服务器框架
const express = require('express');
const app = express();

app.get('/set-cookie', (req, res) => {
    // 设置一个名为 'exampleCookie' 的 Cookie
    res.cookie('exampleCookie', 'HelloWorld', { maxAge: 900000, httpOnly: false });
    res.send('Cookie has been set.');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

2. 通过客户端 JavaScript 设置 Cookie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Client Side Cookie</title>
</head>
<body>
    <script>
        // 设置一个名为 'clientCookie' 的 Cookie
        document.cookie = "clientCookie=HelloWorld; max-age=900";
    </script>
</body>
</html>

3. 通过 Node.js 服务器读取 Cookie

app.get('/read-cookie', (req, res) => {
    const cookies = req.cookies;
    console.log(cookies); // 输出服务器设置的 Cookie
    res.send(`Cookies read from server: ${JSON.stringify(cookies)}`);
});

4. 通过客户端 JavaScript 读取 Cookie

<script>
    // 读取所有 Cookie
    function getCookie(name) {
        let cookieArr = document.cookie.split(";");
        
        for (let i = 0; i < cookieArr.length; i++) {
            let cookiePair = cookieArr[i].split("=");
            
            /* Removing whitespace at the beginning of the cookie name
               and compare it with the given string */
            if(name == cookiePair[0].trim()) {
                // Decode the cookie value and return
                return decodeURIComponent(cookiePair[1]);
            }
        }
        
        return null;
    }

    console.log(getCookie('clientCookie')); // 输出客户端设置的 Cookie
</script>

结论

要实现跨端的 Cookie 读写，必须分别通过服务器端和客户端的方法进行操作。服务器端代码不能直接读取或修改客户端 JavaScript 设置的 Cookie，反之亦然。开发者需要理解这一点，并根据需求选择合适的方法来处理 Cookie。


可以读取的。楼主cookie设置path 没有？我服务端设置的cookie 的一个小例子 是这样写的

var cookies=req.headers.cookie||[];
		if(cookies.length>0){
			for(var i in cookies){
				if(cookies[i].split('=')[0]=="username"){
					res.setHeader('Set-Cookie', cookies[i]+'; path=/; max-age=0');
				}
			}
		}
res.setHeader('Set-Cookie', 'username='+req.body.username+'; path=/; max-age=360000');

好吧，多谢了，不是代码的问题，是思路的问题。。。。

在Node.js服务器端读写浏览器（客户端）的Cookie时，存在一定的限制。这是因为浏览器出于安全考虑，不允许跨域或跨不同来源的脚本读取和写入特定的Cookie。然而，如果您需要在Node.js服务器上处理客户端的Cookie，可以通过HTTP请求头中的Cookie字段来获取这些信息，并且也可以通过设置响应头中的Set-Cookie字段来设置新的Cookie。

示例代码

获取Cookie

const http = require('http');
const url = require('url');

http.createServer((req, res) => {
    const cookies = req.headers['cookie'];
    if (cookies) {
        console.log('Cookies from client:', cookies);
    } else {
        console.log('No cookies found.');
    }

    // 继续处理请求...
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('<h1>Hello World!</h1>');
}).listen(3000);

设置Cookie

const http = require('http');
const url = require('url');

http.createServer((req, res) => {
    // 设置一个新Cookie
    res.setHeader('Set-Cookie', ['mycookie=myvalue; HttpOnly', 'anothercookie=anothervalue']);

    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('<h1>Hello World!</h1>');
}).listen(3000);

解释

  • 获取Cookie: 在Node.js服务器端，您可以直接从HTTP请求头中读取名为Cookie的字段来获取客户端浏览器设置的Cookie。

  • 设置Cookie: 您可以通过在HTTP响应头中设置Set-Cookie字段来向客户端发送新的Cookie。注意，如果您希望提高安全性，可以考虑使用HttpOnly标志，这将防止JavaScript访问该Cookie。

这种机制允许您的Node.js服务器与客户端之间的交互符合Web标准和最佳实践。对于跨域场景下的Cookie读写，则需要额外配置如CORS等策略以确保安全性和正确性。

回到顶部