Envoyer des cookies entre origines différentes

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Si votre API se trouve sur une origine différente de votre front-end et que vous souhaitez lui envoyer des cookies, vous devrez activer le CORS sur votre serveur et transmettre les cookies avec vos requêtes en fournissant l'option {credentials: "include"} à fetch.

Les arguments fournis à la fonction fetch utilisée par tRPC peuvent être modifiés comme suit.

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

info

Vous devez également activer le CORS sur votre serveur en modifiant votre adaptateur ou le serveur HTTP qui expose votre API. La meilleure approche varie d'un adaptateur à l'autre et dépend de votre infrastructure d'hébergement, chaque adaptateur documentant généralement cette procédure le cas échéant.