为什么我的 FastAPI Cookie 没有出现在我的 React 前端中？

FastAPI：在 React 前端处理 Cookie

概述

FastAPI 为后端开发启用 Cookie 处理。但是，在 React 前端中发送和接收 cookie 可能需要特定配置才能确保正常功能。

为什么 Cookie 没有返回到 React 前端

如果您的 FastAPI 后端没有将 cookie 返回到您的 React 应用程序，有几个因素可能会导致此问题：

1.无效的 Axios 请求：

• 通过将 withCredentials 属性设置为 true，确保您的 Axios 请求正确发送凭据。
• 验证 Axios 请求 URL 是否与您的域匹配FastAPI 后端。使用 localhost 和 127.0.0.1 作为不同的域可能会破坏 cookie 创建。

2. CORS 限制：

• 由于跨域请求，您需要在 FastAPI 应用程序中显式配置 CORS 设置。
• 使用 CORSMiddleware 和allow_credentials= 指定允许的来源True 则启用跨域 cookie用法。

3. FastAPI 中的 Cookie 设置：

• 确保使用 response.set_cookie() 方法在 FastAPI 路由中正确设置 Cookie。
• 验证 httponly 参数是否设置为True 可防止客户端访问 cookie。

4. SameSite 属性：

• cookie 的 SameSite 属性会影响其在不同域中的可用性。
• 将其设置为 SameSite=Lax 或 SameSite=Strict 以控制 cookie 的可访问性和防止跨站攻击。

FastAPI 示例Cookie 设置：

from fastapi import FastAPI, Response

app = FastAPI()

@app.get('/')
def main(response: Response):
    response.set_cookie(
        key='token',
        value='some-token-value', 
        httponly=True,
        samesite='Lax'  # or 'Strict'
    ) 
    return {'status': 'success'}

带有凭据的 Axios 请求示例：

await axios.post(url, data, {withCredentials: true}))

重要说明：

• 请记住，使用通配符 (*) 表示Access-Control-Allow-Origin 可能会限制通信类型并阻止发送 cookie 和授权标头。
• 确保前端域明确包含在允许的来源中，并且将allow_credentials=True 设置为正确的cookie 处理。

以上是为什么我的 FastAPI Cookie 没有出现在我的 React 前端中？的详细内容。更多信息请关注PHP中文网其他相关文章！