我目前正在开发我的第一个 web 应用程序,前端React
使用FastAPI
.
我正在尝试与 Chrome 联合测试它——看看前端是否对后端进行了正确的 API 调用,并显示结果。我在使用 cookie 时遇到了问题,我需要帮助。提前为这篇长文章道歉——过去几天我浏览了很多资源,此时我不确定什么是相关的,什么是不相关的。
- 前端开启
localhost:8080
- 后端开启
http://127.0.0.1:8000
- 使用以下
FastAPI
后端代码正确设置 CORS(我相信):
app = FastAPI()
origins = [
"http://localhost:8080"
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
情况:前端GET
向http://127.0.0.1:8000/api/abc
后端发出请求,后端设置 cookie。
/*====================
尝试 1:
使用以下后端代码设置 cookie:
response.set_cookie(key="abcCookieKey", value="abcCookieValue")
并GET
使用以下前端 JS 代码发出请求:
fetch('http://127.0.0.1:8000/api/abc', {
method: 'GET',
credentials: 'include',
})
尝试 1 的结果:
在Console
Chrome的选项卡上,我收到以下警告:
A cookie associated with a cross-site resource at http://127.0.0.1/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
在网络选项卡上,我在检查set-cookie
响应标头时收到以下消息:
This Set-Cookie was blocked because it has the "SameSite=Lax" attribute but came from a cross-site response which was not the response to a top-level navigation.
======================*/
...所以我做了一些研究,然后提出
/*====================
尝试 2:
使用以下后端代码设置 cookie:
response.set_cookie(key="abcCookieKey", value="abcCookieValue", samesite="none", secure=True)
并GET
使用相同的前端 JS 代码发出请求。
尝试 2 的结果:
在Console
Chrome的选项卡上,我收到与尝试 1 完全相同的警告,即使响应标头set-cookie
带有Samesite=none; Secure
. 此外,标题有以下警告
This Set-Cookie was blocked because it had the "Secure" attribute but was not received over a secure connection.
======================*/
..所以我尝试使用https
并提出:
/*====================
尝试 3:
一切都与尝试 #2 相同,除了在我的 JS 获取代码中,我使用fetch('https://127.0.0.1:8000/api/abc ...
然后我收到以下警告我的后端运行uvicorn
:WARNING: Invalid HTTP request received.
======================*/
问题:
- 我在尝试#2 时遗漏了什么吗?肯定必须有一种简单的方法来设置从后端到前端的 cookie 而不必担心 https?
- 如果我别无选择,只能使用
https
,我如何在本地运行可以访问的后端服务器https
?我所做的研究使它看起来像是一个复杂/耗时的过程。(但是,公平地说,我对 web-dev/all things network 的理解非常有限)。