Enviar cookies entre orígenes diferentes

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Si tu API reside en un origen diferente al de tu front-end y deseas enviar cookies a ella, necesitarás habilitar CORS en tu servidor y enviar cookies con tus solicitudes proporcionando la opción {credentials: "include"} a fetch.

Puedes modificar los argumentos proporcionados a la función fetch que usa tRPC de la siguiente manera.

app.ts
ts
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',
        });
      },
    }),
  ],
});

app.ts
ts
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',
        });
      },
    }),
  ],
});

información

También necesitas habilitar CORS en tu servidor modificando tu adaptador o el servidor HTTP que está delante de tu API. La mejor manera de hacer esto varía entre adaptadores y según tu infraestructura de hosting, y los adaptadores individuales generalmente documentan este proceso cuando es aplicable.