쿠키를 크로스 오리진으로 전송하기

비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

API가 프론트엔드와 다른 오리진에 위치하고 쿠키를 전송하려는 경우, 서버에서 CORS를 활성화하고 fetch에 {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를 활성화해야 합니다. 이를 수행하는 가장 좋은 방법은 어댑터마다 그리고 호스팅 인프라에 따라 다르며, 개별 어댑터는 일반적으로 해당되는 경우 이 과정을 문서화합니다.