cors & cookies

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Send cookies cross-origin with tRPC client

To send cookies cross-origin, provide the option credentials: 'include' to the fetch function in your tRPC client configuration. Modify the fetch function parameter in httpBatchLink to include credentials in the fetch options.

Example: httpBatchLink with credentials included

import { createTRPCClient, httpBatchLink } from '@trpc/client'; import type { AppRouter } from './server'; const client = createTRPCClient<AppRouter>({ links: [ httpBatchLink({ url: 'YOUR_SERVER_URL', fetch(url, options) { return fetch(url, { ...options, credentials: 'include', }); }, }), ], });

CORS must be enabled on the server

When sending cookies cross-origin, you must enable CORS on your server. This is done by modifying your adapter or the HTTP server that fronts your API. The specific implementation varies by adapter and hosting infrastructure, and individual adapters document the process where applicable.

tRPC authentication and session adapters

Community projects provide tRPC integration with authentication and session management: trpc-iron-session (iron-session integration), and NextAuth integration examples in starter projects.

CORS headers in Next.js Pages Router tRPC handler

To add CORS support to a tRPC handler in Next.js Pages Router, create the API handler with createNextApiHandler but do not return it immediately. Instead, define a custom handler function that takes req and res parameters, sets the necessary CORS headers on the res object using res.setHeader(), checks if req.method is 'OPTIONS' and returns early, then passes the request to the nextApiHandler. For authenticated CORS requests, set Access-Control-Allow-Origin to the specific requesting domain, Access-Control-Allow-Methods to 'OPTIONS, GET', Access-Control-Allow-Headers to 'content-type', set Referrer-Policy to 'no-referrer', and set Access-Control-Allow-Credentials to 'true'.

Standalone server CORS handling requires manual setup

By default, the standalone server does not respond to HTTP OPTIONS requests or set any CORS headers. To handle CORS, you can use the popular cors package from npm and pass it via the middleware option.

Using cors middleware with createHTTPServer

The middleware option in createHTTPServer accepts any function resembling connect/node.js middleware. This example uses the cors package to enable CORS. Note that the middleware option is a simple escape hatch and won't compose multiple middlewares on its own.

Standalone server does not handle CORS or OPTIONS by default

By default the standalone server will not respond to HTTP OPTIONS requests or set any CORS headers. You must configure this yourself if not hosting in an environment that handles it.

Add CORS support to Standalone server with middleware option

Install the cors package and pass it to the Standalone server's middleware option. The middleware option accepts any function that resembles a connect/Node.js middleware. Example: createHTTPServer({ middleware: cors(), router: appRouter, createContext() { return {}; } }).listen(3333);

Configure CORS on tRPC API handler

In pages/api/trpc/[trpc].ts, wrap createNextApiHandler with a custom handler that sets CORS headers. Set Access-Control-Allow-Origin, Access-Control-Allow-Methods (OPTIONS, GET, POST), and Access-Control-Allow-Headers (*). Handle OPTIONS requests by writing 200 status and ending response.

Give your agent this brain