T
tRPC

❓-help

tRPC Cors Authentication Error

RRhys1/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
RRhys1/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 User1/25/2023
Message Not Public
Sign In & Join Server To View
RRhys1/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 User1/25/2023
Message Not Public
Sign In & Join Server To View
VVengeance1/30/2023
this helped me a lot thank you 🙏 they should definitely specify this stuff in the docs
RRhys1/30/2023
I'll make a PR - good to know other people are encountering it

Looking for more? Join the community!

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 lGlobal context or shared context.We are using react query and trpc and we ran into a undesired effect I hope someone could help me wiNot 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 witthe 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 harHelp 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 anBest 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 roA 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 ihow can i get procedure name?is it possible to get procedure name? i would like to append a service to ctx based on procedure namtRPC sockets with reactTrying to make my React app work with socket with minimal server but getting error: "Uncaught TypeEShould useQueries be able to 'select' data?Hi! I'm trying to use the newly implemented `useQueries` method to query for multiple items. I need React Native UsageHello, I wanted to know if trpc can be used with react native ? And is it possible on a bare react n