SvelteKit部署后/typo接口400错误排查求助

核心问题分析 #

前端报Uncaught (in promise) SyntaxError: Unexpected end of JSON input本质是后端没有返回合法的JSON响应，结合400 Bad Request，大概率是后端处理请求时出错但未正确输出错误响应，或是请求本身不符合后端解析要求。

具体排查方向与解决办法 #

1. 补全后端API的错误处理逻辑 #

本地开发时SvelteKit开发服务器会自动捕获错误并返回格式化响应，但生产环境（adapter-node）如果没做手动错误捕获，一旦邮件发送代码抛出异常，会直接返回空响应或无结构的错误信息，导致前端JSON解析失败。

比如你的/typo路由文件（+server.js/ts）里，必须确保所有分支都返回合法JSON：

// src/routes/typo/+server.js
import { json } from '@sveltejs/kit';
import nodemailer from 'nodemailer';

export async function POST({ request }) {
  try {
    const formData = await request.json();
    // 初始化邮件传输器
    const transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        user: process.env.GMAIL_USER,
        pass: process.env.GMAIL_APP_PASSWORD
      }
    });
    // 发送邮件
    await transporter.sendMail({
      from: process.env.GMAIL_USER,
      to: '目标邮箱',
      subject: '表单提交通知',
      text: JSON.stringify(formData, null, 2)
    });
    return json({ success: true }, { status: 200 });
  } catch (err) {
    // 必须返回结构化JSON，不能仅抛出错误
    console.error('邮件发送失败:', err);
    return json({ success: false, error: err.message }, { status: 500 });
  }
}

2. 验证生产环境的请求格式 #

400错误通常是请求体不符合后端要求，检查以下两点：

• 前端提交时是否设置了正确的请求头：确保fetch或表单提交代码里包含Content-Type: application/json，且请求体是JSON字符串：

  // 前端提交示例
  fetch('/typo', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(你的表单数据)
  });
  

• 打开浏览器DevTools的Network面板，查看请求的URL、Payload内容是否正确，确认没有路径拼写错误或数据格式问题。

3. 确认生产环境的环境变量是否生效 #

pm2直接运行index.js时不会自动加载.env文件，需手动配置：

• 可以在pm2的启动配置文件ecosystem.config.js里注入环境变量：

  // ecosystem.config.js
  module.exports = {
    apps: [{
      name: 'sveltekit-site',
      script: './build/index.js',
      env: {
        NODE_ENV: 'production',
        GMAIL_USER: '你的Gmail邮箱',
        GMAIL_APP_PASSWORD: '你的Gmail应用密码'
      }
    }]
  };
  

• 用pm2 logs查看后端日志，搜索GMAIL_USER等变量，确认是否正确加载；也可以登录服务器执行echo $GMAIL_USER验证变量是否存在。

4. 检查生产环境的CORS配置 #

如果前端与后端域名不一致，需在SvelteKit的hooks.server.js里手动配置CORS：

// src/hooks.server.js
export async function handle({ event, resolve }) {
  // 处理OPTIONS预检请求
  if (event.request.method === 'OPTIONS') {
    return new Response(null, {
      headers: {
        'Access-Control-Allow-Origin': '你的前端域名',
        'Access-Control-Allow-Methods': 'POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type'
      }
    });
  }
  const response = await resolve(event);
  response.headers.set('Access-Control-Allow-Origin', '你的前端域名');
  return response;
}

5. 查看生产环境后端日志 #

直接执行pm2 logs查看后端的错误输出，这是最直接的排查方式。比如如果是Gmail认证失败，日志会显示Error: Invalid login: 535-5.7.8 Username and Password not accepted.，此时就可以针对性解决SMTP认证问题，而非纠结前端的JSON解析错误。

总结 #

优先查看pm2后端日志定位具体报错，再检查错误处理逻辑是否返回合法JSON，最后验证环境变量和请求格式，大部分问题都能快速解决。

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