Express中先clearCookie再setCookie出现同名双Cookie问题求助

问题场景 #

我用Express.js写了两个接口：/send负责写入名为test、值为send的Cookie；/get原本用来修改这个Cookie的值为get，运行完全正常。但取消注释res.clearCookie("test")后，用Thunder Client测试时，响应里出现了两个同名的test Cookie，和预期的单个结果不符——我本来想先清除旧Cookie再设置新值，搞不懂为什么会出现这种情况。

复现代码 #

const express = require("express")
const app = express()
const cookieParser = require("cookie-parser")
app.use(cookieParser())
app.get("/send", (req, res) => {
    res.cookie("test", "send")
    res.sendStatus(200)
})
app.get("/get", (req, res) => {
    console.log("request cookies:   ", req.cookies)
    // res.clearCookie("test")  <=============== 取消注释后出现问题
    res.cookie("test", "get")
    res.sendStatus(209)
})
app.listen(3500, () => console.log(`listening on port ...`)) 

原因解析 #

• res.clearCookie("test")并不是直接删除Cookie，而是向响应头添加一条Set-Cookie指令：把test的过期时间设为过去的时间（比如expires=Thu, 01 Jan 1970 00:00:00 GMT），同时设置maxAge=0，让浏览器主动删除该Cookie。
• 紧接着调用res.cookie("test", "get")，又会添加另一条Set-Cookie指令，给test设置新的有效值。
• 这两条指令都会被Express保留在响应头里，所以Thunder Client会显示两个同名Cookie条目。但实际浏览器处理时，会先执行清除操作，再设置新值，最终只会保留新的那个Cookie——只是响应头会同时存在这两个操作指令。

解决方案 #

其实完全没必要先调用res.clearCookie再设置新值：直接调用res.cookie("test", "get")就能覆盖旧Cookie，只要Cookie的名称、域名、路径等参数和之前一致（默认情况下参数都是匹配的），浏览器就会自动用新值替换旧值。

如果确实有特殊场景需要先清除再设置（比如要修改Cookie的路径、域名属性），那必须保证res.clearCookie的参数和当初设置Cookie时完全一致。比如当初设置Cookie时指定了path：

res.cookie("test", "send", { path: "/" })

那清除时也要传相同的path：

res.clearCookie("test", { path: "/" })
res.cookie("test", "get", { path: "/" })

不过这种场景很少见，绝大多数情况下直接覆盖就足够解决问题。

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