Rhys•3y ago

tRPC Cors Authentication Error

Hey, I was mainly looking to enable CORS locally for calling my tRPC endpoints in localhost:3000 (NextJS) from localhost:6006 (Storybook) I followed this doc https://trpc.io/docs/cors and this section of the advanced usage to enable cors https://trpc.io/docs/api-handler#advanced-usage but I'm getting the following error CORS No Allow Credentials - Removing the credentials: include fixes this https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials however then I'm unable to use authenticated endpoints What I'm looking to do is call my authed endpoints on localhost:3000 from localhost:6000, has anyone had experience with this? Relevant repository code: Next - https://github.com/AnswerOverflow/AnswerOverflow/tree/message-result-page/apps/nextjs Storybook - https://github.com/AnswerOverflow/AnswerOverflow/tree/message-result-page/packages/ui

6 Replies

RhysOP•3y ago

  res.setHeader("Access-Control-Allow-Origin", "http://localhost:6006");
  res.setHeader("Access-Control-Request-Method", "*");
  res.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET");
  res.setHeader("Access-Control-Allow-Headers", "content-type");
  res.setHeader("Referrer-Policy", "no-referrer");
  res.setHeader("Access-Control-Allow-Credentials", "true");

  res.setHeader("Access-Control-Allow-Origin", "http://localhost:6006");
  res.setHeader("Access-Control-Request-Method", "*");
  res.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET");
  res.setHeader("Access-Control-Allow-Headers", "content-type");
  res.setHeader("Referrer-Policy", "no-referrer");
  res.setHeader("Access-Control-Allow-Credentials", "true");

Changing my headers to be these (updating allow-headers and allow-origin) allowed the authentication to get through Gotta update my code to make sure this is dev only now - Is this something that should be updated on the documentation? I can make a PR if so

Unknown User•3y ago

Message Not Public

RhysOP•3y ago

When I followed that setup it threw some errors at me First it was that using a wildcard * for access control allow origin doesn’t work with sending cookies for auth it fails Next it failed since it didn’t have access-control-allow-headers set to true Then it failed since it didn’t have the access-control-allow-headers set to content type That’s what I’m wondering if needs to be updated in the docs as the docs recommend using wildcards there but that fails to do with The CORS docs aren’t wrong and that setup does work if you’re not doing authed endpoints but where it fails is when you call endpoints that need to read the auth cookies

Unknown User•3y ago

Message Not Public

Vengeance•3y ago

this helped me a lot thank you 🙏 they should definitely specify this stuff in the docs

RhysOP•3y ago

I'll make a PR - good to know other people are encountering it

tRPC Cors Authentication Error

Did you find this page helpful?