Client headers do not get passed to API routes called in loader/beforeLoad {TanStack Start}

I wanted to create an architecture where I have an API and frontend together using TanStack Start whilst having SSR so I tried to achieve this using the API routes provided by the framework.
But when I want to fetch data from authenticated API routes in the loader the client's cookies/headers containing authentication info don't get passed to API.
The only method I found to resolve this is to wrap the API call in a server function and use the

getHeaders()

getHeaders()

function to pass the headers to the fetch call.

const fetchUser = createServerFn("GET", async () => {
  const res = await fetch("http://localhost:3000/api/me", {
    headers: getHeaders() as any,
  });

  if (!res.ok) {
    return { data: null, error: "Server error" };
  }

  const data = await res.json();
  return { data, error: null };
});

const fetchUser = createServerFn("GET", async () => {
  const res = await fetch("http://localhost:3000/api/me", {
    headers: getHeaders() as any,
  });

  if (!res.ok) {
    return { data: null, error: "Server error" };
  }

  const data = await res.json();
  return { data, error: null };
});

Is there any other way to resolve this without using a server function

TanStack•2y ago•

34 replies

colossal-harlequin

Client headers do not get passed to API routes called in loader/beforeLoad {TanStack Start}

getHeaders()

getHeaders()

function to pass the headers to the fetch call.

const fetchUser = createServerFn("GET", async () => {
  const res = await fetch("http://localhost:3000/api/me", {
    headers: getHeaders() as any,
  });

  if (!res.ok) {
    return { data: null, error: "Server error" };
  }

  const data = await res.json();
  return { data, error: null };
});

const fetchUser = createServerFn("GET", async () => {
  const res = await fetch("http://localhost:3000/api/me", {
    headers: getHeaders() as any,
  });

  if (!res.ok) {
    return { data: null, error: "Server error" };
  }

  const data = await res.json();
  return { data, error: null };
});

Is there any other way to resolve this without using a server function

Client headers do not get passed to API routes called in loader/beforeLoad {TanStack Start}

Similar Threads

Client headers do not get passed to API routes called in loader/beforeLoad {TanStack Start}

Similar Threads

Similar Threads

Similar Threads