SvelteKit发布外部API到Vercel后跨域请求失败求助

先排查最容易踩的坑 #

1. 路由大小写问题 #

Vercel部署环境对路由路径大小写严格敏感，本地开发时/API和/api能混用，但Vercel会把/API当成完全不同的路由。立刻把你的API路由文件夹改成小写/api，客户端请求路径也同步改成/api，这是80%这类问题的根源。

2. POST请求体解析错误 #

SvelteKit在Vercel的边缘运行时环境中，对POST请求体的解析有严格要求，必须显式解析JSON或FormData，不能直接从request中取参数。修正你的+server.ts代码：

import { json } from '@sveltejs/kit';

// 处理OPTIONS预检请求（跨域场景必须）
export async function OPTIONS() {
  return json({}, {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type'
    }
  });
}

export async function POST({ request }) {
  try {
    // 必须显式解析请求体
    const body = await request.json();
    const { func } = body;

    // 你的业务逻辑
    let responseData;
    switch (func) {
      case 'your-target-method':
        responseData = { success: true, data: 'your-result-data' };
        break;
      default:
        return json({ error: '无效的func参数' }, { status: 400 });
    }

    // 返回结果并带上CORS头
    return json(responseData, {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type'
      }
    });
  } catch (err) {
    // 捕获解析错误，返回明确提示
    return json({ error: '请求体解析失败，请发送JSON格式数据' }, { status: 400 });
  }
}

3. 清理无效配置 #

把之前加的vercel.json、hook.server.ts里的冗余CORS配置、app.html里的相关meta标签全部删掉——SvelteKit部署Vercel时默认会处理基础配置，额外配置反而可能引发冲突。

验证步骤 #

1. 用Postman发送POST请求到https://你的Vercel域名/api，请求体用JSON格式：

{ "func": "你的目标方法名" }

2. 查看Vercel控制台的「函数日志」，重点确认：
   • 请求路径是否是小写的/api
   • 请求体是否被正确解析
   • 有没有抛出未捕获的运行时错误

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