FastAPI set_cookie方法无法在浏览器中设置Cookie问题排查求助

问题描述 #

后端采用FastAPI（端口8000），前端使用Solid-JS（端口3000）。登录时希望后端通过Cookie向前端发送refresh token，但请求成功响应后浏览器未收到Cookie。相关代码如下：

前端Axios登录请求代码 #

const onClickLogin = () => {
    axios({
      method: 'post',
      url: 'http://localhost:8000/login',
      responseType: 'json',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      data: {
        username: inputUsername(),
        password: inputPw(),
      },
    }).then((response) => {
      props.setToken(response.data.access_token);
      props.updateUserinfo();
      props.setPageStatus('loggedin');
    });
};

后端FastAPI登录接口代码 #

@app.post('/login', summary='Create access and refresh tokens for user', response_model=TokenSchema)
async def login(form_data: OAuth2PasswordRequestForm = Depends()):
    ...

    response = JSONResponse({'access_token': create_access_token(user['id'])})
    response.set_cookie(key='refresh_token_test', value=create_refresh_token(user['id']),
                        max_age=REFRESH_TOKEN_EXPIRE_MINUTES, httponly=False, samesite='none', domain='http://localhost:3000')

    return response

FastAPI CORS配置 #

origins = [
    'http://localhost:3000'
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

可能的原因 #

• Cookie的Domain参数格式错误：后端设置的domain值为http://localhost:3000，但Cookie的Domain只能是主机名（如localhost），不能包含协议和端口。浏览器会直接忽略格式错误的Domain配置，导致Cookie无法写入。
• 前端请求未启用Credentials：Axios请求未设置withCredentials: true，即使后端开启了allow_credentials=True，前端不携带凭证的情况下，浏览器不会保存后端返回的Cookie。
• SameSite=None需配合Secure属性：当Cookie的SameSite设为none时，浏览器要求必须同时设置secure=True（仅在HTTPS连接下传输）。本地开发使用HTTP协议，不符合要求，浏览器会拒绝保存该Cookie。

调试方法 #

• 检查响应头的Set-Cookie字段：打开Chrome开发者工具的「网络」面板，找到登录请求，查看响应头中的Set-Cookie字段，确认其格式是否合规，是否存在浏览器标记的无效提示。
• 查看浏览器Cookie状态：在开发者工具的「应用」面板中，检查对应域名下的Cookie列表，或者在控制台执行document.cookie命令，确认Cookie是否被写入；也可以在Chrome设置的「Cookie及其他网站数据」中查看拦截记录。
• 简化Cookie配置测试：先简化Cookie参数，比如去掉domain，将SameSite改为lax，关闭secure，测试是否能正常写入Cookie，再逐步添加参数排查问题点。
• 验证CORS配置有效性：在网络面板的请求头中确认Origin字段正确，响应头中存在Access-Control-Allow-Credentials: true和与请求Origin匹配的Access-Control-Allow-Origin值。

内容的提问来源于stack exchange，提问作者S. Yong