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:
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");
});