oscarama
oscarama13mo ago

trpc cors

my sveltekit app is running on https://example.com with tRPC and it's making requests to http://127.0.01:3001/api/trpc (otherwise it won't work) but I'm getting a CORS error (' The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:3001/api/trpc/model.getAll?batch=1&input=%7B%7D. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)'). how can I fix this?
17 Replies
Nick
Nick13mo ago
What Adapter are you using on the backend? You just need to enabled CORS and whitelist the frontend
Nick
Nick13mo ago
Standalone Adapter | tRPC
tRPC's Standalone Adapter is the simplest way to stand up your application. It's ideal for local development, and for server-based production environments. In essence it's just a wrapper around the standard Node.js HTTP Server with the normal options related to tRPC.
oscarama
oscarama13mo ago
I'm not using any adapter
// public.ts
import type { ContextType } from "./context";
import { initTRPC } from "@trpc/server";

const t = initTRPC.context<ContextType>().create();

export const middleware = t.middleware;
export const router = t.router;
// public.ts
import type { ContextType } from "./context";
import { initTRPC } from "@trpc/server";

const t = initTRPC.context<ContextType>().create();

export const middleware = t.middleware;
export const router = t.router;
it's all in one repo with sveltekit and sveltekit is using adapter-node might it be a sveltekit issue?
Nick
Nick13mo ago
You're always using an Adapter, you might just not have recognised it Whatever you're using to host tRPC inside Svelte is the adapter, and something in that or Svelte will need CORS setting up Might be worth having a look at the docs you've been following, and any github issues for the project
oscarama
oscarama13mo ago
const handleTRPC: Handle = async ({ event, resolve }) => {
if (event.request.method === "OPTIONS") {
return new Response(null, {
headers: {
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "*",
},
});
};

if (event.url.pathname.startsWith(`${trpcPathBase}/`)) {
const response = await fetchRequestHandler({
endpoint: trpcPathBase,
req: event.request,
router: appRouter,
createContext: () => {
return createContext(event);
},
});

response.headers.append("Access-Control-Allow-Origin", "*");

return response;
};

// eslint-disable-next-line no-return-await
return await resolve(event);
};
const handleTRPC: Handle = async ({ event, resolve }) => {
if (event.request.method === "OPTIONS") {
return new Response(null, {
headers: {
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "*",
},
});
};

if (event.url.pathname.startsWith(`${trpcPathBase}/`)) {
const response = await fetchRequestHandler({
endpoint: trpcPathBase,
req: event.request,
router: appRouter,
createContext: () => {
return createContext(event);
},
});

response.headers.append("Access-Control-Allow-Origin", "*");

return response;
};

// eslint-disable-next-line no-return-await
return await resolve(event);
};
with svelte I have this
Nick
Nick13mo ago
👍 looks about right
oscarama
oscarama13mo ago
mind you it does work locally, but when I put it on the VPS I get the cors error
Nick
Nick13mo ago
Got it, yes that looks fine locally, but the infrastructure itself is almost always its own setup
oscarama
oscarama13mo ago
and if I dont use 127.0.0.1 I get a 500 Fetch Failed error with no extra message and I'm using nginx idk if any of that has any bearing
Nick
Nick13mo ago
You'll need to figure out where the request is terminating, if nginx is saying no then config that, if it's reaching tRPC then something else might be wrong Check logs etc, deploying to custom infra is always a bit of a debugging process 😄
oscarama
oscarama13mo ago
TRPCClientError: fetch failed yeah, I'm using pm2 in this case is all I get in the logs
Nick
Nick13mo ago
That log is from the client though, not the bakend nginx will have logs, pm2 will have some logs, but there may be other things with logs depending on your server setup
oscarama
oscarama13mo ago
got it
Nick
Nick13mo ago
oscarama
oscarama13mo ago
perhaps. I'll try that, thanks
oscarama
oscarama13mo ago
no change
oscarama
oscarama13mo ago
issue is fixed by the way, some obscure issue with nginx (or I'm just ignorant lol). thanks for your help