响应头部的Set-Cookie无法在浏览器中存储Cookies。

Question

我正在从后端向浏览器设置2个cookie。其中一个是安全的HTTPOnly（它是refreshToken），另一个没有这些参数，因此可以被JavaScript访问（携带有关refreshToken何时过期的信息）。

响应中的Cookies：

这段话的意思是：“这两个都没有在浏览器中设置。我研究了所有关于cookies的知识，但老实说，我现在有些迷茫，需要你的帮助。

一开始，在我的本地环境上（后端在localhost:8080，前端在localhost:3000），它非常好用。然后我部署了它，结果它就无法工作了。我又在本地测试了一下，并勾选了“禁用缓存”，以防止不必要的行为，但即使在本地测试时，它也无法工作。

我要提到，我正在使用CORS，不确定它是否会干扰。”

我在Chrome和Firefox中都测试过了。

- Vergil333

Answer 1

我终于弄清楚了。Cookies是有效的。答案是在前端和后端都设置withCredentials = true。

起初我以为，当我们想将隐藏在安全的仅限HttpOnly Cookie中的凭据发送到我们无法访问但浏览器可以访问的地方时，前端的withCredentials参数才会被使用。显然，当我们想从响应中设置cookie时，它也会被使用。请参考文档链接。

如果在发起请求之前未将withCredentials设置为true，则来自不同域的响应无法为其自己的域设置cookie值。

其次，我们还必须将CorsFilter（在Spring Boot中）中的withCredentials添加到后端，否则我们会遇到CORS错误。

CorsConfiguration()
    .apply {
        allowedOrigins = listOf(uiUrl)
        allowedHeaders = listOf("*")
        allowedMethods = listOf("*")
        allowCredentials = true
    }

- Vergil333

---

真希望早点看到这个。你救了我的一天 :) - Amirhossein

这是最清晰的答案，因为要解决这个问题，你需要同时关注前端和后端。许多答案没有做到这一点，导致更多的混淆。 - Wayne Wei

Answer 2

我终于弄清楚了。Cookie是有效的。答案是在前端和后端都设置withCredentials = true。

我也遇到了同样的问题。

在前端（127.0.0.1:3000），我使用Axios，我需要这个：

 return axios
    .post(
        API_LOGIN,
        {
            email,
            password,
        },
        { withCredentials: true }
    ).then(....).catch(....);

在后端，我正在使用NestJS，我需要这个：

  app.enableCors({
     credentials: true,
     origin: APP_URL,
     exposedHeaders: ['set-cookie','ajax_redirect'],
     preflightContinue: true,
     methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS",
     optionsSuccessStatus: 200,
  });

- Universal War One