크로스 오리진으로 쿠키 전송

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를 활성화해야 합니다. 적절한 설정 방법은 어댑터와 호스팅 인프라에 따라 다릅니다. 각 어댑터 문서에서 해당되는 설정 과정을 확인할 수 있습니다.