CORS ERROR (Configured Properly)

General
1

I have created a simple Express and tRPC server and configured CORS. However, the client app (vanilla TS Vite) is still blocked due to a CORS error.

Error:

image
image823×254 21.8 KB

Backend code:

import * as trpcExpress from '@trpc/server/adapters/express';
import express from 'express';
import cors from 'cors';
import { z } from 'zod';
import { usersList } from './data';
import { publicProcedure, router, createContext } from './trpc';
const users = usersList;
const app = express();

app.use(cors());

const appRouter = router({
    userList: publicProcedure
        .query(() => {
            return users;
        }),
    userById: publicProcedure
        .input(z.number())
        .query(async (opts) => {
            const { input } = opts;
            const user = users.find((user) => user.id === input);
            return user;
        }),
    creatUser: publicProcedure
        .input(z.object({ name: z.string(), email: z.string(), id: z.number() }))
        .mutation(async (opts) => {
            const { input } = opts;
            const user = users.push(input);
            return user;
        }),
})

export type AppRouter = typeof appRouter;


app.use(
    '/trpc',
    trpcExpress.createExpressMiddleware({
        router: appRouter,
        createContext,
    }),
);

app.listen(3000, () => {
    console.log("server running");
});
2

Do you have the port publicly exposed?

3

yes both client and server side ports are exposed publicly.

4

Interesting. I wonder if @chandra or @romannurik have run into this.

5

Hi there! I’m unable to reproduce the problem … a pretty standard tRPC setup works for me when the public port is exposed. Here’s the relevant client code I’m using, which works OK:

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'https://3000-idx-[redacted].cloudworkstations.dev/trpc',
    }),
  ],
});

const users = await trpc.userList.query();

document.body.appendChild(document.createTextNode(JSON.stringify(users)))

This is with port 3000 open:

image
image572×322 18 KB

Is there anything else unique to your situation that you can think of that might affect this?