Enable tRPC CORS for 3rd party domain name in a Monorepo setup

route.ts

import type { NextRequest } from "next/server";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter, createTRPCContext } from "@workspace/api";

import { auth } from "~/auth/server";

/**
 * Configure basic CORS headers
 * You should extend this to match your needs
 */
const setCorsHeaders = (res: Response, origin: string | null, reqHeaders?: Headers) => {
  if (origin) {
    res.headers.set("Access-Control-Allow-Origin", origin);
  }
  res.headers.set('Access-Control-Allow-Methods', 'OPTIONS, GET, POST');
  // Echo requested headers if present, else use a safe default
  let allowHeaders = 'content-type, authorization';
  if (reqHeaders) {
    const requested = reqHeaders.get('access-control-request-headers');
    if (requested) {
      allowHeaders = requested;
    }
  }
  res.headers.set('Access-Control-Allow-Headers', allowHeaders);
  res.headers.set('Access-Control-Allow-Credentials', 'true');
};

export const OPTIONS = (req: NextRequest) => {
  const origin = req.headers.get("origin");
  const response = new Response(null, {
    status: 204,
  });
  setCorsHeaders(response, origin, req.headers);
  return response;
};

const handler = async (req: NextRequest) => {
  const origin = req.headers.get("origin");
  const trpcResponse = await fetchRequestHandler({
    endpoint: "/api/trpc",
    router: appRouter,
    req,
    createContext: () =>
      createTRPCContext({
        auth: auth,
        headers: req.headers,
      }),
    onError({ error, path }) {
      console.error(`>>> tRPC Error on '${path}'`, error);
    },
  });

  // Clone the response to set headers
  const response = new Response(trpcResponse.body, trpcResponse);
  setCorsHeaders(response, origin, req.headers);
  return response;
};

export { handler as GET, handler as POST };