Question

我目前正在开发我的第一个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")

并使用以下前端JS代码发出GET请求：

fetch('http://127.0.0.1:8000/api/abc', {
            method: 'GET',
            credentials: 'include',
        })

尝试1的结果：
在Chrome的Console标签上，我收到以下警告：

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)

并使用相同的前端JS代码发出GET请求。

尝试2的结果：
在Chrome的Console标签上，即使响应标头带有set-cookie的{{1}}，我仍然收到与尝试1完全相同的警告。此外，标头中还显示以下警告

Samesite=none; Secure

=================== * /

..so，所以我尝试使用This Set-Cookie was blocked because it had the "Secure" attribute but was not received over a secure connection.并提出：

/ * ====================
尝试3： 一切与尝试2相同，除了我的JS提取代码外，我使用https
然后在运行fetch('https://127.0.0.1:8000/api/abc ...的后端上收到以下警告：uvicorn

=================== * /

问题：

我在尝试2时缺少什么吗？当然，必须有一种简单的方法来设置从后端到前端的cookie，而不必担心https？
如果我别无选择，只能使用WARNING: Invalid HTTP request received.，如何在本地运行可以通过https访问的后端服务器？我所做的研究似乎是一个复杂/费时的过程。（但是，公平地说，我对网络开发/万物网络的了解非常有限。）

Answer 1

嗨，大家好，我会尽力提出这个概念，

首先请知道我正在使用从SailsJS开发的后端和从AngularJS开发的前端，以及使用Angular9开发的连接到后端的应用程序

我在前端（CMS）使用仅HTTP cookie，以授予向登录用户添加内容的权限。身份验证成功后，将为它们设置仅HTTP cookie。

请注意，http cookie有一个棘手的部分，后端和前端都提供不同的URL，就像在所展示的场景中一样。

点：-

因此，在开发中，您必须将后端和前端托管在同一IP下。例如我的后端：192.168.8.160：1337，前端：192.168.8.160：81。不同的端口具有相同的IP。
在生产环境中这不是场景，您可以拥有任何域：）
您必须在后端允许CORS，并且将前端ip：port设置在可接受的来源下。

实施中，您必须确定您的环境，

if（sails.config.environment ==='开发'）{

res.setHeader('Set-Cookie',[`token=${token};  Path=/;HttpOnly; maxAge=86400000;SameSite=false;`]);

}其他{

res.setHeader('Set-Cookie',[`token=${token};  Path=/;HttpOnly; maxAge=86400000;SameSite=None;Secure=true;`]);

}

请注意，在开发环境中的上述代码中，您需要SameSite=false，因此您需要具有相同的IP，因为我们不能拥有SameSite=None，因为它将需要拥有Secure=true，然后需要HTTPS。在开发模式下实现它会很头疼。

就是这样。如果您做对了，就可以实现。

Answer 2

您可以通过转到“ chrome：// flags”并禁用“没有SameSite的cookie必须是安全的”来完全禁用此功能。但是，这将对所有站点禁用它，因此在您也不进行开发时，它的安全性将降低。

跨站点Cookie的问题：如何设置后端到前端的Cookie

2 个答案: