@trpc/server - Handling CORS and CORS preflight requests

[lleyton]

When using the standalone server, it might be useful to handle CORS preflight requests. Currently the request just falls with a 405, Method Not Allowed. I'm proposing the addition of a cors field on the CreateHttpHandlerOptions object, which would contain an array of allowed origins, or a boolean of whether to allow all origins. Thoughts?

[KATT]

You can use the http handler straight-off.

Example code

import * as trpc from '@trpc/server';
import { z } from 'zod';
import http from 'http';

type Context = {};

export const appRouter = trpc.router<Context>().query('hello', {
  input: z
    .object({
      name: z.string(),
    })
    .optional(),
  resolve: ({ input }) => {
    return {
      text: `hello ${input?.name ?? 'world'}`,
    };
  },
});

export type AppRouter = typeof appRouter;

// create handler
const handler = trpc.createHttpHandler({
  router: appRouter,
  createContext() {
    return {};
  },
});

const server = http.createServer((req, res) => {
  // do whatever you want here
  // Set CORS headers
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Request-Method', '*');
  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
  res.setHeader('Access-Control-Allow-Headers', '*');
  if (req.method === 'OPTIONS') {
    res.writeHead(200);
    res.end();
    return;
  }
  handler(req, res);
});

server.listen(2022);

[wiredmatt]

what about using the next.js adapter? I'm not seeing how to set the headers. Trying to return from response meta gives me type errors unless I return an empty object. I think I'd also lose the option to deploy to vercel if I use a custom server.

// src/pages/api/trpc/[trpc].ts
import { createNextApiHandler } from "@trpc/server/adapters/next";
import { appRouter } from "../../../server/router";
import { createContext } from "../../../server/router/context";

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createContext,
});