# CORS ERROR (Configured Properly)

**URL:** <https://community.firebasestudio.dev/t/cors-error-configured-properly/7535>\
**Category:** General\
**Created:** [November 13, 2024, 8:28am UTC](https://community.firebasestudio.dev/t/cors-error-configured-properly/7535 "2024-11-13T08:28:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pawan\_Poudel](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/pawan_poudel/32/3135_2.png) [@Pawan\_Poudel](https://community.firebasestudio.dev/u/Pawan_Poudel)\
**Post date:** [November 13, 2024, 8:28am UTC](https://community.firebasestudio.dev/t/cors-error-configured-properly/7535/1 "2024-11-13T08:28:20Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/idxcommunity/original/2X/0/0195b54f1e150ea3dc77f6e7b60126f02c31e926.png)

Backend code:

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

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/kirupa/32/4_2.png) [@kirupa](https://community.firebasestudio.dev/u/kirupa)\
**Post date:** [November 13, 2024, 8:05pm UTC](https://community.firebasestudio.dev/t/cors-error-configured-properly/7535/2 "2024-11-13T20:05:31Z")

</div>

Do you have the port publicly exposed?

---

<div class="post-metadata">

**Author:** ![Pawan\_Poudel](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/pawan_poudel/32/3135_2.png) [@Pawan\_Poudel](https://community.firebasestudio.dev/u/Pawan_Poudel)\
**Post date:** [November 14, 2024, 4:25am UTC](https://community.firebasestudio.dev/t/cors-error-configured-properly/7535/3 "2024-11-14T04:25:54Z")

</div>

yes both client and server side ports are exposed publicly.

---

<div class="post-metadata">

**Author:** ![kirupa](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/kirupa/32/4_2.png) [@kirupa](https://community.firebasestudio.dev/u/kirupa)\
**Post date:** [November 15, 2024, 8:22pm UTC](https://community.firebasestudio.dev/t/cors-error-configured-properly/7535/4 "2024-11-15T20:22:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![romannurik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/romannurik/32/4841_2.png) [@romannurik](https://community.firebasestudio.dev/u/romannurik)\
**Post date:** [November 18, 2024, 3:36pm UTC](https://community.firebasestudio.dev/t/cors-error-configured-properly/7535/5 "2024-11-18T15:36:31Z")

</div>

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:

```ts
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](https://us1.discourse-cdn.com/flex002/uploads/idxcommunity/original/2X/c/ca647918c4518884ed20da41f8e0754ff7d44e04.png)

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