React登录认证后Cookie未保存且未发送至后端问题排查

我用React开发了一个基础认证登录表单，发现前端完全没保存Cookie凭证。本来以为设置withCredentials: true就能自动保存Cookie，但登录后在控制台执行document.cookie返回空值。目前应用只靠localStorage存储isAuthenticated状态控制页面访问，虽然能正确接收后端的认证结果，但登录时没保存任何凭证或Cookie。之前在后端试了多种方法都没用，怀疑是React前端的问题，下面是精简后的React代码，求帮忙排查原因。

App.jsx代码 #

// ./App.jsx
import { useState, useEffect } from 'react';
import './App.css';
import DataForm from './components/TestItemForm';
import LoginForm from './components/LoginForm';

function App() {

  // Check localStorage to see if the user is authenticated
  const [isAuthenticated, setIsAuthenticated] = useState(
    localStorage.getItem('isAuthenticated')
  );

  // Handle successful login by updating state and storing in localStorage
  const handleLoginSuccess = () => {
    setIsAuthenticated(true);
    localStorage.setItem('isAuthenticated', 'true'); // Save authentication status in localStorage
  };

  useEffect(() => {
    console.log('Cookies:', document.cookie);
  }, []);
  
  // Handle logout, clear state and localStorage
  const handleLogout = async () => {
    try {
      await fetch('http://localhost:5000/logout', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      setIsAuthenticated(false);
      localStorage.removeItem('isAuthenticated'); // Remove authentication status from localStorage
    } catch (err) {
      console.error('Logout failed');
    }
  };

  return (
    <>
      <h1>Pare-Down App</h1>
      {
        isAuthenticated
        ?
        <>
          <DataForm />
          <button onClick={handleLogout}>Log Out</button>
        </>
        :
        <LoginForm onLoginSuccess={handleLoginSuccess} />
      }
    </>
  )
}

export default App;

LoginForm.jsx代码 #

// ./components/LoginForm.jsx
import React, { useState } from 'react';

const LoginForm = ({ onLoginSuccess }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const [attempts, setAttempts] = useState(0);
  const [lockedOut, setLockedOut] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (lockedOut) return;

    try {
      const response = await fetch('http://localhost:5000/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username, password }),
        withCredentials: true,
      });

      if (response.ok) {
        const data = await response.json();
        setError(null);
        onLoginSuccess();
      } else {
        setAttempts((prev) => prev + 1);
        setError('Username or password was incorrect');
        if (attempts >= 4) {
          setLockedOut(true);
          setTimeout(() => {
            setLockedOut(false);
            setAttempts(0);
          }, 180000); // 3 minutes
        }
      }
    } catch (err) {
      setError('An error occurred. Please try again.');
    }
  };

  return (
    <div>
      <h2>Login</h2>
      {lockedOut && <p>You have been locked out for 3 minutes due to too many failed attempts.</p>}
      {error && <p>{error}</p>}
      <form onSubmit={handleSubmit}>
        <label>
          Username:
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            required
          />
        </label>
        <label>
          Password:
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </label>
        <button type="submit" disabled={lockedOut}>Log In</button>
      </form>
    </div>
  );
};

export default LoginForm;

排查要点 #

• withCredentials 覆盖范围：你的登录请求已经设置了withCredentials: true，但后续需要携带Cookie的请求（比如logout、数据接口）也必须加上这个配置，否则浏览器不会自动携带Cookie。比如当前logout请求就缺少该配置，需要修改：

  await fetch('http://localhost:5000/logout', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    withCredentials: true, // 新增这一行
  });
  

• Cookie的HttpOnly属性：如果后端设置了HttpOnly类型的Cookie，document.cookie是无法读取的，但浏览器会在跨域请求中自动携带。不要只通过document.cookie判断Cookie是否存在，应该在浏览器开发者工具的Application > Cookies > 目标域名下查看。
• Cookie检查时机：当前的useEffect在组件挂载时执行，此时还未完成登录，所以打印的是空Cookie。可以修改依赖项，在登录状态变化后再检查：

  useEffect(() => {
    console.log('Cookies:', document.cookie);
  }, [isAuthenticated]);
  

• 跨域配置验证：若前后端跨域（如前端localhost:3000、后端localhost:5000），后端必须确保：
  • Access-Control-Allow-Origin 设为前端具体域名（不能是*）
  • Access-Control-Allow-Credentials 设为true
• Cookie的Domain和Path设置：后端设置Cookie时，Domain需与前端域名匹配（如均为localhost），Path设为/以确保全站有效。

内容的提问来源于stack exchange，提问作者The Past that You Dont Remembe