无法在Heroku和Netlify+cloudflare之间设置httpOnly cookie

Question

我有以下问题。我正在尝试设置httpOnly cookie，但什么也没发生。我花了几个小时试图解决这个问题，但我不知道发生了什么…我的架构如下：

Backend：托管在Heroku上的Python快速api，可在https://api.mysuperdomain.com.

前端：在Netlify上托管的GatsbyJs，可在https://mysuperdomain.com

当我调用React组件的登录请求时：

const handleSubmit = async (e) => {
e.preventDefault()
const config = {
headers: {
crossDomain: true,
withCredentials: true,
'Content-Type': 'application/x-www-form-urlencoded'
}
}
const requestBody = {
username: emailRef.current.value,
password: passwordRef.current.value
}
try {
const data = await axios.post('https://api.mysuperdomain.com/login', qs.stringify(requestBody), config)

我从我的后台得到了带有头的响应，设置cookie：

set-cookie: Authorization="Bearer somethinghere"; Domain=.mysuperdomain.com; expires=Tue, 28 Jul 2020 20:40:32 GMT; Max-Age=1800; Path=/; SameSite=lax

不幸的是，在浏览器存储中，我看不到这个cookie。

我的后台(API(以以下方式设置cookie：

@app.post("/login")
async def login(form_data: OAuth2PasswordRequestForm = Depends()):
user = authenticate_user(fake_users_db, form_data.username, form_data.password)
if not user:
raise HTTPException(status_code=400, detail="Incorrect username or password")
access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
access_token = create_access_token(
data={"sub": form_data.username}, expires_delta=access_token_expires
)
token = jsonable_encoder(access_token)
response = JSONResponse({'status': 'authenticated'})
response.set_cookie(
key="Authorization",
value=f"Bearer {token}",
domain=".mysuperdomain.com",
httponly=True,
max_age=1800,
expires=1800,
)
return response

我的DNS记录在Cloudflare中，后端的CNAME记录被代理：

Typ    Name  Content                                        TTL    Proxy status 
CNAME  api   limitless-starfish-something.herokudns.com     Auto   Proxied

SSL/TLS加密模式是灵活的(加密浏览器和Cloudflare之间的流量(。Heroku的后端没有SSL证书，因此我设置了灵活的SSL/TLS加密模式。

也许这和上面的配置有什么关系？

Answer 1

我认为发生这种情况是因为您没有向应用程序添加CORS中间件，在FastAPI中，allow_credentials默认设置为bool = False。但你可以很容易地改变这一点。

首先，您需要从fastapi.middlewares导入CORSMiddleware

from fastapi.middleware.cors import CORSMiddleware

然后我们可以在我们的应用中添加一个中间件

app.add_middleware(
CORSMiddleware,                         
allow_credentials=True,
)

此外，您还可以使用CORSMiddleware添加起源和所有其他内容，有关更多相关信息，请查看FastAPI CORS。