React登录疑似CORS异常 成功后无法存JWT跳转路由

按出现概率排序，最可能的几个诱因如下：

• 最常见：接口返回结构和判断逻辑不匹配。你注册接口能正常跑，是因为注册接口确实返回了顶层字段status_code: "SUCCESS"，但登录接口的返回结构大概率没按这个约定来：要么是成功状态用的是code: 200（数字类型，和你判断的字符串"SUCCESS"不相等）、success: true这类其他字段，要么是状态字段嵌套在返回体的其他层级，你直接取顶层的data.status_code拿到的是undefined，判断条件永远进不去。
  另外要注意：fetch本身不会对401、500这类HTTP错误状态抛异常，只有网络故障的时候才会进catch，哪怕后端返回401密码错误，只要接口连通了都会进then链，这时候拿到的是错误响应体，自然匹配不到成功条件。
• 次常见：localStorage写入报错阻断了后续逻辑。如果浏览器开了隐私模式、禁用了本地存储，或者后端返回的结构里根本没有data字段，你执行localStorage.setItem的时候会直接抛错，而你写的catch只在控制台打日志，没有页面提示，看起来就像点了按钮没反应。
• 容易忽略的点：表单默认提交行为没阻止。如果登录表单的提交事件没调用e.preventDefault()，点击提交时浏览器会触发原生表单刷新，直接中断JS逻辑执行，自然不会有跳转。注册功能如果是用react-hook-form这类表单库的handleSubmit包裹的，会自动阻止默认行为，所以注册能正常跑，登录如果没做这层处理就会出问题。
• 写法隐患：你混用了async/await和.thenPromise链，虽然语法上不报错，但可能出现异步等待时机不对，路由跳转被React渲染周期打断的问题。

1. 先加日志定位真实返回值，别靠猜。在登录接口的then回调第一行加console.log('登录接口返回：', data)，提交一次看控制台里后端实际返回的结构是什么，先把成功判断的条件和真实返回字段对齐。
2. 重构登录提交逻辑，统一用async/await+try/catch的写法，补上HTTP状态判断、错误提示、兼容处理，参考代码如下：

const submitHandler = async (formData: object, e?: React.FormEvent) => {
  // 如果是直接绑定在form onSubmit上，先阻止默认提交行为
  e?.preventDefault();
  try {
    const res = await fetch("http://localhost:4000/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    });
    // 先处理HTTP错误，避免4xx/5xx被当成正常响应
    if (!res.ok) {
      const errRes = await res.json();
      throw new Error(errRes.message || "账号或密码错误");
    }
    const data = await res.json();
    // 这里根据控制台打印的真实返回结构调整判断条件
    if (data.status_code === "SUCCESS") {
      // 写入localStorage前做兼容，避免隐私模式报错
      try {
        localStorage.setItem("userData", JSON.stringify(data.data || {}));
      } catch (storageErr) {
        console.warn("本地存储写入失败", storageErr);
      }
      router.push("/dashboard");
    } else {
      setError(data.message || "Invalid Credentials!");
    }
  } catch (err) {
    // 错误要同步到页面提示，别只打控制台
    setError(err instanceof Error ? err.message : "登录失败，请稍后重试");
    console.error(err);
  }
};

3. 如果是手动给表单绑定onSubmit事件，确保传入事件参数阻止默认行为：

<form onSubmit={(e) => submitHandler(loginForm, e)}>
  {/* 表单项 */}
</form>

建议把注册接口的逻辑也按这个写法重构，去掉混用的Promise链，补上HTTP状态判断和错误提示，避免后续出现同类问题。

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