FastAPI自定义本地子域名无法设置Cookie问题咨询

问题背景 #

• FastAPI设置Cookie代码：

  response.set_cookie(key="rf_t", value=access_token, httponly=False, expires=120)
  

• 该代码在localhost:<任意端口>域名下正常生效，但通过hosts映射的自定义子域名（main.shop.localhost、admin.shop.localhost等）无法设置Cookie，仅原生localhost域名有效。
• hosts文件配置：

  127.0.0.1 main.shop.localhost
  127.0.0.1 admin.shop.localhost
  127.0.0.1 store.shop.localhost
  
  127.0.0.1 shop.localhost
  

• 前端Vue3 Vite配置：

  server: {
      port: 5000,
      host: "shop.localhost"
    },
  

• 推测问题源于Chrome的非HTTPS策略，需解决本地子域名下设置跨域Cookie的问题。

解决方案 #

1. 为本地域名启用HTTPS（核心解决Chrome限制） #

Chrome对非HTTPS的.localhost类域名有Cookie设置限制，必须启用HTTPS才能正常生效，步骤如下：

• 用mkcert工具生成本地可信证书，为shop.localhost及其所有子域名签发证书；
• 配置FastAPI启用HTTPS：

  import uvicorn
  if __name__ == "__main__":
      uvicorn.run("main:app", host="0.0.0.0", port=8000, ssl_keyfile="./key.pem", ssl_certfile="./cert.pem")
  

• 配置Vite启用HTTPS，修改vite.config.js：

  import fs from 'fs';
  export default {
    server: {
      port: 5000,
      host: "shop.localhost",
      https: {
        key: fs.readFileSync('./key.pem'),
        cert: fs.readFileSync('./cert.pem'),
      }
    }
  }
  

2. 配置Cookie的domain参数实现跨子域名共享 #

修改FastAPI的Cookie设置代码，指定跨子域名生效的domain值：

response.set_cookie(
    key="rf_t",
    value=access_token,
    httponly=False,
    expires=120,
    domain=".shop.localhost"  # 前缀的点用于匹配所有子域名
)

此设置可让shop.localhost及其所有子域名（如main.shop.localhost）读取该Cookie。

3. 临时绕过Chrome安全策略（仅调试用） #

若仅需临时调试，不想配置HTTPS，可通过Chrome启动参数关闭安全限制：

• 关闭所有Chrome窗口；
• 右键Chrome快捷方式→属性，在“目标”栏末尾添加： --disable-web-security --user-data-dir="C:/ChromeDevSession"；
• 启动Chrome后即可在本地子域名环境下设置Cookie，但此方法仅适用于调试，禁止用于日常浏览。

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