关于Cookie的HttpOnly与Secure属性及本地HTTP环境的技术疑问

一、HttpOnly和Secure的基础作用 #

Secure - 该标志确保Cookie仅能通过HTTPS连接传输，这类连接使用SSL/TLS加密保护数据。
HttpOnly - 该标志阻止客户端脚本（如JavaScript）访问Cookie

二、实际场景与核心困惑 #

• 本地前端以http://localhost:3000（非HTTPS）运行，通过fetch的credentials:"include"在API请求头中携带Cookie，不清楚这个参数是如何把Cookie附加到请求头的
• 最搞不懂的是：原本后端设置Cookie时带了secure=True和httponly=True，Cookie能正常被请求携带；但移除这两个属性后，Cookie反而不再出现在API请求头里——按道理这俩属性是加限制的，没想到移除后反而失效了

后端原Cookie设置代码 #

response.set_cookie('session', session_cookie, expires=expires_in,  max_age=10*24*60*60, path="/", samesite='none', secure=True, httponly=True )

前端请求代码 #

fetch("http://127.0.0.1:8000/process_story", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include",
  body: JSON.stringify(requestData),
})

问题拆解解答 #

1. credentials:"include"的工作逻辑：这个参数是告诉浏览器，不管是否跨域，都要在请求中带上目标域名对应的Cookie。浏览器会自动从自身的Cookie存储里匹配对应域名的Cookie并附加到请求头，完全不需要前端JS手动操作——哪怕Cookie是HttpOnly的，浏览器也能正常携带，只是JS代码读不到这个Cookie而已。

2. 移除Secure和HttpOnly后Cookie消失的关键原因：问题出在你设置了samesite='none'。根据浏览器的安全规则，当Cookie设置SameSite=None时，必须同时搭配Secure属性，否则浏览器会直接拒绝保存这个Cookie，自然也就不会在后续请求中携带它。这是浏览器的强制安全限制，用来避免跨站请求中Cookie被意外泄露。

另外补充：本地的localhost/127.0.0.1属于特殊场景，浏览器允许在非HTTPS环境下使用带Secure属性的Cookie，这是为了方便开发者本地调试，所以你原配置里的secure=True在本地能正常生效。

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