Skip to main content
Version: 10.x

Send cookies cross-origin

If your API reside on a different origin than your front-end and wish to send cookies to it, you will need to enable CORS on your server and send cookies with your requests by providing the option {credentials: "include"} to fetch.

The arguments provided to the fetch function used by tRPC can be modified as follow.

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