tRPC Cors Authentication Error

RRhys

1/24/2023

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

RRhys

1/24/2023

  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

UUUnknown User

1/25/2023

Message Not Public

RRhys

1/25/2023

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

UUUnknown User

1/25/2023

Message Not Public

VVengeance

1/30/2023

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

RRhys

1/30/2023

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

Looking for more? Join the community!

tRPC

tRPC Cors Authentication Error

Join Server

tRPC

tRPC Cors Authentication Error

Join Server

Recommended Posts

Demo code `trpc.infinitePosts.add` on infinitedQuery not workingDoc here: https://trpc.io/docs/useInfiniteQuery#getinfinitedata, I created an my query like this: ``NextJS + TRPC + NXi have a nextjs application inside a NX monorepo. i have everything for @trpc/server inside a node l Global context or shared context.We are using react query and trpc and we ran into a undesired effect I hope someone could help me wi Not sure how to troubleshoot `Failed to fetch at Function.from`Am getting this on a trpc mutation in v.9 that is firing successfully then pushing me to the URL wit the tRPC loop or cyclewhat is the full sequesnce of execution of trpc? where does it start when a user requests something tRPC context and NextJSGuys quick question about using trpc and nextjs. I'm using context with trpc to create some queries Hardware IoT APIMaybe it's a wrong place to ask but out of curious: Does anyone have experience building API for har Help to understand how and when to use tRPC in larger projectsHi! I'm pretty sure the answer to my question is that tRPC is not suitable for this project, but an Best practices on trpc and SentryWe are currently migrating to trpc from Apollo server/graphql. We don't use next. What are the best How to do dependecy injection?My routes are grouped by using the router object. i'd like to be able to inject a service to each ro A lot of WHYGreat post from @cje on Twitter but also got a lot of questions 1. If the data flow starts from `How are they defined separately?I am using monorepo for my project design and I want to separate the definition of trpc completely i how can i get procedure name?is it possible to get procedure name? i would like to append a service to ctx based on procedure nam tRPC sockets with reactTrying to make my React app work with socket with minimal server but getting error: "Uncaught TypeE React Native UsageHello, I wanted to know if trpc can be used with react native ? And is it possible on a bare react n