クロスオリジンでクッキーを送信する

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

APIがフロントエンドとは異なるオリジンにある場合、クッキーを送信するにはサーバーでCORSを有効化し、fetchに{credentials: "include"}オプションを指定してリクエストとともにクッキーを送信する必要があります。

tRPCが使用するfetch関数に渡される引数は以下のように変更できます。

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

情報

APIを提供するアダプターやHTTPサーバー自体でもCORSを有効化する必要があります。最適な設定方法はアダプターごと、またホスティング環境によって異なり、各アダプターのドキュメントに詳細が記載されている場合があります。