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

あなたのAPIがフロントエンドとは別のオリジンにあり、クッキーを送信したい場合、サーバーでCORSを有効にする必要があり、オプション{credentials: "include"}を使用して要求でクッキーを送信します。

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

app.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
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';
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'YOUR_SERVER_URL',
      fetch(url, options) {
        return fetch(url, {
          ...options,
          credentials: 'include',
        });
      },
    }),
  ],
});

情報

また、アダプターやAPIをフロントするHTTPサーバーを変更して、サーバーでCORSを有効にする必要があります。これを行う最善の方法は、アダプターごと、およびホスティングインフラストラクチャによって異なり、一般的に個々のアダプターは該当する場合にこのプロセスを文書化します。