Spring -> React: никак не могу установить cookie

Я знаю, знаю, есть ТЫСЯЧИ форумов и вопросов, на которых люди могут заставить это работать, и я последовал ВСЕМ их предложениям, но я все еще не могу сделать это правильно и буквально трачу на это дни, надеюсь, кто-то это сделает. Помоги мне.

Итак, у меня есть контроллер Spring с аннотацией:

@CrossOrigin(origins = "http://localhost:3000", allowCredentials = "true")

Из этого контроллера я возвращаю заголовок для set-cookie:

return ResponseEntity.ok()
                .header(HttpHeaders.SET_COOKIE, my_cookie)
                ...

my_cookie создается следующим образом:

ResponseCookie.from("cookie_name", value)
                .path("/")
                .httpOnly(true)
                .secure(false)
                .domain("localhost")
                .build()
                .toString();

Прежде чем что-то сказать, да, я перепробовал ВСЕ возможные комбинации, которые нашел в Интернете:

secure false|true --> что, насколько я понимаю, true только для https, поэтому должно быть false для тестов локального хоста

домен --> Я пробовал использовать localhost, localhost.org, localhost.test, my.localhost.org, вообще без домена...

Samesite --> либо strict|none|lax, я пробовал их все во всех комбинациях с другими флагами.

Spring находится на порту 8080.

Затем в ответ на порт 3000 я вызываю аутентификацию:

async function login(email, password) {
    await fetch("http://localhost:8080/auth/login", {
      method: "POST",
      body: JSON.stringify({
        email: email,
        password: password,
      }),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        return response.json();
      })
      .then((json) => {
        if (json.error) {
          const error = json.error;
          setShowError(true);
          setError(errorMap.get(error));
          return;
        }
        const token = json.payload.token;
        const refreshToken = json.payload.refreshToken;
        const name = json.payload.name;
        setCookie("token", token);
        setCookie("refreshToken", refreshToken);
        setCookie("name", name);
      })
      .catch(() => {
        setShowError(true);
        setError("Error from server");
      });
  }

Итак, 3 файла cookie установлены, как я это делаю из реакции. Но set-cookie из весны НЕ устанавливается в приложении -> localhost:3000 cookie. Вместо этого я получаю печенье от почтальона. Я знаю, что это связано с браузером, но я просто хочу отметить, что я правильно установил файл cookie для почтальона.

Глядя на консоль в браузере, можно увидеть заголовок Set-Cookie, а также вкладку «Cookies» внутри панели запросов. Он просто не устанавливается на стороне cookie браузера.

Более того, когда я вызываю последующие запросы, я не вижу в запросах 3 файла cookie. Насколько я понимаю, куки всегда должны включаться в запросы к BE, браузер это делает автоматически, верно?

Кажется, я упускаю некоторые мелкие детали, я знаю. Я пробовал эти домены с .test, .org... потому что я читал в ответ документы о заголовке Set-Cookie и читал о двойных точках/3 точках и т. д... поэтому я попробовал их. слишком.

Пожалуйста, помогите мне выбраться из этого. Уже несколько дней я пробовал разные комбинации. Я также пробовал с Firefox, те же результаты.

🤔 А знаете ли вы, что...
С React можно легко интегрировать с существующими проектами и кодом.


237
1

Ответ:

Решено

Наконец-то решил!!! На самом деле было две ошибки: во-первых, мне не хватало учетных данных: «включить» в реакцию при вызове аутентификации/входа в систему. Вторая ошибка: я установил файл cookie с именем «__Secure-», что нежелательно для браузера. Поэтому я просто убрал «__».

Работающие настройки, которые я использую сейчас:

ResponseCookie.from("Secure-name", cookieValue)
                .path("/")
                .httpOnly(true)
                .secure(false)
                .domain("localhost")
                .build()
                .toString();

локальный хост: 3000 реагирует

локальный хост: 8080 весна

@CrossOrigin(origins = "http://localhost:3000", allowCredentials = "true")

на контроллере аутентификации.

Более того, все файлы cookie теперь корректно отправляются при последующих запросах.