Express框架下HTTPS本地环境Cookie无法显示问题求助

之前客户端用HTTP时，后端设置Cookie正常；但客户端切换为HTTPS（3000端口）后，后端（HTTP协议，5000端口）设置的Cookie不再显示在浏览器中。

核心原因 #

1. 浏览器安全策略：HTTPS页面向HTTP接口发起请求属于跨协议的不安全请求，浏览器会阻止保存这类请求返回的Cookie，避免未加密的Cookie被窃取。
2. Cookie配置缺失必要安全属性：当前Cookie未设置secure标记，HTTPS环境下浏览器默认不会保存非secure的Cookie。

修复步骤 #

1. 将后端Express服务切换为HTTPS #

客户端已使用HTTPS，后端也需同步切换为HTTPS才能让浏览器正常接受Cookie。使用自签名证书的话，修改后端启动代码：

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

// 读取自签名证书文件（路径根据实际文件位置调整）
const options = {
  key: fs.readFileSync('./server.key'),
  cert: fs.readFileSync('./server.cert')
};

app.use(
  cors({
    credentials: true,
    origin: "https://localhost:3000",
  })
);
app.use(cookieParser({}));
app.use("/api/auth", authRoute);

// 使用https模块启动服务
const PORT = process.env.PORT || 5000;
https.createServer(options, app).listen(PORT, () => {
  console.log("Server is Running on HTTPS Port " + PORT);
});

2. 更新Cookie配置 #

在设置Cookie时添加secure: true属性，跨域场景下调整sameSite：

// 登录接口中的Cookie设置部分
res.cookie("isLogged", true, {
  sameSite: "none", // 跨域场景需设为none，必须配合secure属性
  secure: true,
});

res.cookie("authToken", token, {
  httpOnly: true,
  sameSite: "none",
  secure: true,
});

3. 修改客户端axios的baseURL为HTTPS地址 #

const axiosInstance = axios.create({
  withCredentials: true,
  baseURL: "https://localhost:5000/api/", // 改为HTTPS地址
});

额外注意事项 #

• 自签名证书在浏览器中会被标记为不安全，需手动信任：访问https://localhost:5000，添加安全例外即可。
• 若开发测试必须保持后端HTTP，可在Chrome浏览器开启chrome://flags/#unsafely-treat-insecure-origin-as-secure，将http://localhost:5000加入列表，重启浏览器后可临时允许跨协议Cookie传递，但此方法仅适用于开发，生产环境必须全链路HTTPS。

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