oscarama•15mo 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•15mo ago

What Adapter are you using on the backend? You just need to enabled CORS and whitelist the frontend

Nick•15mo ago

Here's the standalone documentaton: https://trpc.io/docs/server/adapters/standalone#handling-cors--options

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•15mo 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•15mo 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•15mo 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•15mo ago

👍 looks about right

oscarama•15mo ago

mind you it does work locally, but when I put it on the VPS I get the cors error

Nick•15mo ago

Got it, yes that looks fine locally, but the infrastructure itself is almost always its own setup

oscarama•15mo 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•15mo 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•15mo ago

TRPCClientError: fetch failed yeah, I'm using pm2 in this case is all I get in the logs

Nick•15mo 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•15mo ago

got it

Nick•15mo ago

Probably is nginx anyway: https://enable-cors.org/server_nginx.html

enable cross-origin resource sharing

CORS support site

oscarama•15mo ago

perhaps. I'll try that, thanks

oscarama•15mo ago

no change

oscarama•15mo ago

issue is fixed by the way, some obscure issue with nginx (or I'm just ignorant lol). thanks for your help