FastAPI本地WebSocket无法获取Cookie问题求助

安全阿岳

2026-4-28

为什么`websocket.cookies`返回空字典？

我帮你分析下核心问题：你现在拿不到Cookie主要是跨协议跨域限制和Cookie属性不匹配导致的，具体来说：

跨协议触发跨域规则：如果你的HTML页面是通过http://localhost:8000访问的，而WebSocket连接用的是ws://localhost:8000，两者协议不同（HTTP vs WebSocket），属于跨域请求。浏览器默认不会在这类跨域WebSocket连接中主动发送Cookie，除非明确配置允许凭证。
Cookie属性不匹配：你手动在Chrome设置的Cookie，如果Path/Domain/SameSite属性不符合WebSocket请求的路径规则，浏览器也不会携带它。

具体解决方案

1. 修正手动设置的Cookie属性

在Chrome的开发者工具Application标签→Cookies→http://localhost:8000中，确保你的Cookie满足：

Domain：留空（localhost作为Domain时部分浏览器有兼容问题，留空会自动匹配当前域名）
Path：设为/（确保所有localhost:8000下的请求都能携带这个Cookie，包括你的WebSocket路径）
SameSite：设为Lax（如果是跨协议场景，Lax足够；如果是跨域名场景，可设为None，但None需要同时勾选Secure，仅适用于wss://加密连接）

2. 前端代码调整（确保Cookie被携带）

虽然WebSocket API没有withCredentials属性，但我们可以通过调整Cookie属性和后端配置让浏览器自动发送Cookie。修改你的connect函数（如果是跨域名场景，这一步配合后端CORS配置生效）：

function connect(event) {
    var itemId = "1000"
    var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI2MjlmYmU3ZGNjMzQxMGFiNWE2MmZkOWYiLCJ1c2VyIjoiQmk4eVVhOG5TS1dFRm8weEJjYWkwRUtDU2E3TyJ9.7hE3qIcFoLLoDqQSliaHXhSPs4FW75fNafumPdKHPmI"
    ws = new WebSocket("ws://localhost:8000/ws/" + itemId + "/?token=" + token);
    // 如果你是通过document.cookie设置Cookie，可在这里添加：
    // document.cookie = "your_cookie_key=your_value; Path=/; SameSite=Lax";
    event.preventDefault()
}

3. 后端FastAPI配置CORS允许凭证

添加CORS中间件，允许跨域请求携带凭证，这是跨协议/跨域名场景下的关键配置：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 配置允许的前端源
origins = [
    "http://localhost:8000",  # 你的HTML页面访问地址
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,  # 核心：允许携带Cookie等凭证
    allow_methods=["*"],
    allow_headers=["*"],
)

# 你的ConnectionManager和WebSocket路由代码...

4. 验证Cookie是否发送

打开Chrome开发者工具Network标签，找到WebSocket类型的请求，查看Request Headers里是否有Cookie字段。如果有，说明Cookie已经被发送，后端的websocket.cookies就能正常获取到值了。

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