NodeJS出现UnhandledPromiseRejectionWarning且React端报Preflight问题求解

报错根因说明 #

1. 最初的TypeError: Cannot read property 'accessToken' of undefined报错，绝大多数情况是你的Express服务没有配置JSON请求体解析中间件，导致request.body为undefined，读取它的accessToken属性时触发报错。少数情况是数据库查询操作抛出异常，未被捕获导致Promise拒绝。
2. 加try...catch后出现Preflight预检错误，核心原因有两个：一是你没有配置CORS跨域规则，浏览器的OPTIONS预检请求未被正确处理；二是try...catch的异常分支没有返回响应，请求挂起导致浏览器判定跨域校验失败。

具体修复步骤 #

• 第一步：安装并配置基础中间件
  首先在Express服务的入口文件（如app.js/index.js）中增加跨域和请求体解析配置：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许前端域名跨域访问，调试阶段可填*，生产环境替换为你的React服务实际地址
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));
// 配置JSON请求体解析，必须放在路由注册之前
app.use(express.json());
// 全局处理OPTIONS预检请求，直接返回符合CORS规则的响应
app.options('*', cors());

如果没有安装cors依赖，先执行npm i cors安装。

• 第二步：修正路由逻辑，补全所有分支的返回值
  你原有路由存在逻辑漏洞：未传token时无返回、空查询结果时判断逻辑无效、异常分支无返回，修正后代码如下：

router.post('/token/verify', async (request, response) =>{
  try {
    const tokenToVerify = request.body.accessToken;
    // 缺少参数直接返回错误
    if (!tokenToVerify) {
      return response.status(400).json({message: '缺少accessToken参数'});
    }
    // 用findOne替代find+limit，直接返回单条匹配记录，查询效率更高
    const cachedToken = await accessTokenModel.findOne({
      accessToken: tokenToVerify
    }).sort({_id: -1});
    // 无匹配记录直接返回无效token
    if (!cachedToken) {
      return response.status(404).json({message: 'Invalid JWT Token!'});
    }
    if (cachedToken.accessToken === tokenToVerify) {
      return response.status(200).json({message: 'JWT Token Verified Successfully!'});
    } else {
      return response.status(404).json({message: 'Invalid JWT Token!'});
    }
  } catch (error) {
    // 异常分支必须返回响应，避免请求挂起
    console.error('服务端错误：', error);
    return response.status(500).json({message: '服务端运行异常'});
  }
});

• 第三步：前端请求适配
  如果你的React项目配置了请求拦截器自动加认证头，确认不会和手动传的accessToken冲突即可，不需要额外修改axios调用逻辑。

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