Missing content type header for mutations leads to 405

Im migrating my app from Next Pages Router to App Router. I implemented the new trpc wrapper as explained here and everything seems to be working as I expected, except mutations. Mutations fail on preflight with a 405 (local development, same server).

The only difference between the "before" and "after" of the migration (As well as the only difference to queries) is that mutations are missing a content-type: "json" (See attached). Any idea how I can fix this?

Solution

Ok .... so for prosterity the issue was in the server API route. it was missing a POST handler. Fixed version:

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "@cf/providers/trpc";

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc2",
    router: appRouter,
    req,
    createContext: async () => ({}),
  });

export const POST = handler;
export const GET = handler;

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "@cf/providers/trpc";

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc2",
    router: appRouter,
    req,
    createContext: async () => ({}),
  });

export const POST = handler;
export const GET = handler;

Jump to solution

tRPC•3y ago•

4 replies

pupo

Missing content type header for mutations leads to 405

Solution

Ok .... so for prosterity the issue was in the server API route. it was missing a POST handler. Fixed version:

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "@cf/providers/trpc";

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc2",
    router: appRouter,
    req,
    createContext: async () => ({}),
  });

export const POST = handler;
export const GET = handler;

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "@cf/providers/trpc";

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc2",
    router: appRouter,
    req,
    createContext: async () => ({}),
  });

export const POST = handler;
export const GET = handler;

Jump to solution

Missing content type header for mutations leads to 405

Similar Threads

Missing content type header for mutations leads to 405

Similar Threads

Similar Threads

Similar Threads