React+Nodemailer密码重置触发GraphQL 400错误，寻求排查方案

核心排查方向 #

1. 请求格式与头信息问题 #

• 检查前端发送的GraphQL请求是否为标准JSON结构，必须包含query/mutation字段，语法无拼写错误（如缺括号、变量定义不匹配）。
• 确认请求头Content-Type是否为application/json，非该类型会直接触发400错误。
• 打开浏览器DevTools的Network面板，查看GraphQL请求的Response内容，里面会包含具体错误描述（如变量缺失、类型不匹配），这是最直接的排查依据。

2. GraphQL Schema与前端请求不匹配 #

• 对比前端mutation的变量名、参数类型与后端typeDefs定义是否完全一致（注意大小写、必填标记!）。
• 检查resolvers中的mutation函数是否正确接收参数，避免参数名拼写错误导致无法解析请求。

3. 后端逻辑与配置错误 #

• Nodemailer模块：检查SMTP配置（地址、端口、账号密码）是否正确，用try/catch包裹邮件发送逻辑，避免未捕获异常导致GraphQL返回400。
• Express中间件：确保已启用express.json()解析JSON请求体，跨域场景下正确配置CORS，GraphQL中间件的schema参数指向正确的合并后的Schema。

代码检查要点 #

前端组件（PasswordResetReq.jsx） #

确认mutation定义与变量传递格式：

import { gql, useMutation } from '@apollo/client';

// 正确的mutation格式示例
const RESET_REQUEST_MUTATION = gql`
  mutation RequestPasswordReset($email: String!) {
    requestPasswordReset(email: $email) {
      success
      message
    }
  }
`;

// 变量传递需与mutation定义一致
const [requestReset] = useMutation(RESET_REQUEST_MUTATION);
const handleSubmit = async () => {
  await requestReset({ variables: { email: userEmail } });
};

GraphQL TypeDefs & Resolvers #

确保Schema与Resolver参数匹配：

# typeDefs示例
type Mutation {
  requestPasswordReset(email: String!): ResetResponse
  resetPassword(token: String!, newPassword: String!): AuthResponse
}

type ResetResponse {
  success: Boolean!
  message: String!
}

// Resolvers示例
resolvers: {
  Mutation: {
    requestPasswordReset: async (_, { email }, context) => {
      try {
        // 查找用户、生成重置token、发送邮件逻辑
        return { success: true, message: "重置邮件已发送" };
      } catch (err) {
        return { success: false, message: err.message };
      }
    }
  }
}

Express配置 #

确保核心中间件正确：

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json()); // 必须解析JSON请求体
app.use('/graphql', graphqlHTTP({
  schema: schema,
  graphiql: true, // 开启后可在浏览器调试GraphQL
  formatError: err => ({
    message: err.message,
    stack: err.stack?.split('\n') || []
  })
}));

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