React+Axios登录API无法获取Cookie问题求助

我在React项目中使用Axios结合自定义Hook实现登录功能，API返回200状态码，但始终无法获取到接口应返回的Cookie。

一开始怀疑临时请求头（provisional header）是问题根源，排查浏览器扩展后无异常，接着在开发者工具中开启no-cache设置，临时请求头确实消失了，但Cookie依然拿不到，同时请求类型从xhr变成了preflight。

相关代码 #

useLocalLogin.js - 自定义Hook #

import { useState } from "react";
import { useRecoilState, useSetRecoilState } from "recoil";
import {
  authenticated,
  loginInputsSelector,
  loginValidationMessage,
} from "../store";
import axios from "axios";
import { validateLoginInput } from "../util";
import { validateErrorMessage } from "../constants";

const useLocalLogin = () => {
  const setIsAuthenticated = useSetRecoilState(authenticated);
  const [loginInputs, setLoginInputs] = useRecoilState(loginInputsSelector);
  const [errorField, setErrorField] = useState({
    email: false,
    password: false,
  });
  const [validationMessage, setValidationMessage] = useRecoilState(
    loginValidationMessage
  );

  const login = async () => {
    const { errorField, errorMessage } = validateLoginInput(loginInputs);
    setErrorField(errorField);
    setValidationMessage(errorMessage);
    if (!errorMessage) {
      const response = axios
        .post("http://3.36.78.249/auth/sign-in", loginInputs)
        .then((res) => {
          if (res.status === 400) {
            setErrorField({ email: true, password: true });
            setValidationMessage(validateErrorMessage.loginFailed);
            return res;
          } else {
            setIsAuthenticated(true);
          }
        });

      return { response };
    }
  };

  return { errorField, validationMessage, login, setLoginInputs };
};

export default useLocalLogin;

LoginForm.jsx #

import React from "react";
import LoginButton from "./LoginButton";
import { FormErrorMessage, FormTextField } from "../common";
import { FormField } from "../../styled";
import { useLocalLogin } from "../../hooks";
import {
  emailFieldProps,
  localLoginButtonProps,
  passwordFieldProps,
} from "../../constants";

const authType = "login";

function LoginForm() {
  const { errorField, validationMessage, login, setLoginInputs } = useLocalLogin();

  const onBlurTextField = ({ target }) => {
    const { value, name } = target;
    const textFieldInput = { [name]: value };
    setLoginInputs(textFieldInput);
  };

  return (
    <>
      <form>
        <FormField>
          <FormTextField
            {...emailFieldProps(authType)}
            onBlur={onBlurTextField}
            isValid={!errorField.email}
          />
          <FormTextField
            {...passwordFieldProps(authType)}
            onBlur={onBlurTextField}
            isValid={!errorField.password}
          />
        </FormField>
        <FormErrorMessage
          message={validationMessage}
          style={{ padding: "6px 0 16px" }}
        />
        <LoginButton loginFn={login} buttonProps={localLoginButtonProps} />
      </form>
    </>
  );
}

export default LoginForm;

已排查项 #

• 浏览器扩展：无异常
• 开发者工具缓存设置：开启no-cache后临时请求头消失，但仍未获取到Cookie

内容的提问来源于stack exchange，提问作者booya