使用tRPC调用后端API时出现TRPCClientError：无效JSON错误排查

问题根源 #

你遇到的TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON错误，本质是前端发起的tRPC请求（默认用POST方法）未匹配到后端正确路由，API Gateway返回了404的HTML错误页面，导致前端无法解析为JSON。

具体修正步骤 #

1. 修正SST Api的路由配置 #

你的SST栈仅配置了GET /todo路由，但tRPC的awsLambdaRequestHandler需要处理POST请求（httpBatchLink默认用POST传递批量查询）。将路由改为ANY /todo，让所有HTTP方法都能指向tRPC handler：

import { StackContext, Api, ViteStaticSite } from "@serverless-stack/resources";

export function MyStack({ stack }: StackContext) {
  const api = new Api(stack, "api", {
    routes: {
      // 将GET改为ANY，支持所有HTTP方法
      "ANY /todo": "functions/todo.handler"
    },
    cors : true,
  });

  const site = new ViteStaticSite(stack, "site", {
    path: "frontend",
    buildCommand: "npm run build",
    environment: {
      REACT_APP_API_URL: api.url,
    },
  });

  stack.addOutputs({
    SITE: site.url,
  });
}

2. 确认前端tRPC客户端配置 #

你的前端httpBatchLink URL配置无误，可额外显式指定请求头（默认已为application/json，此步骤可选），确保请求格式正确：

const [trpcClient] = useState(() =>
  trpc.createClient({
    links: [
      httpBatchLink({
        url: `${apiUrl}/todo`,
        // 可选：显式设置请求头
        headers() {
          return {
            'content-type': 'application/json',
          };
        },
      }),
    ],
  }),
);

3. 规范tRPC handler导入顺序 #

当前handler代码逻辑正确，调整导入顺序可避免潜在问题：

// 统一将导入放在文件顶部
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
import { awsLambdaRequestHandler } from '@trpc/server/adapters/aws-lambda';

export const t = initTRPC.create();

const appRouter = t.router({
  greeting: t.procedure
  .input(z.object({ name: z.string() }))
  .query(({input}) => {
    return { 
        text: `Hello ${input?.name ?? 'world'}`
    };
  }),
});

export type AppRouter = typeof appRouter;

export const handler = awsLambdaRequestHandler({
    router: appRouter  
})

验证步骤 #

1. 重新部署SST栈：npx sst deploy
2. 访问前端站点，检查请求是否返回正确JSON响应
3. 可通过Postman直接POST请求{apiUrl}/todo，请求体为{"jsonrpc":"2.0","id":0,"method":"greeting","params":{"input":{"name":"will"}}}，验证后端返回结果

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