oscarama•2y 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•2y ago

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

Nick•2y 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.

oscaramaOP•2y 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•2y 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

oscaramaOP•2y 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•2y ago

👍 looks about right

oscaramaOP•2y ago

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

Nick•2y ago

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

oscaramaOP•2y 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•2y 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 😄

oscaramaOP•2y ago

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

Nick•2y 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

oscaramaOP•2y ago

got it

Nick•2y ago

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

enable cross-origin resource sharing

CORS support site

oscaramaOP•2y ago

perhaps. I'll try that, thanks

oscaramaOP•2y ago

no change

oscaramaOP•2y ago

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

trpc cors

Did you find this page helpful?