Sanjib SenS
tRPC•3y ago•
4 replies
Sanjib Sen

Does anybody now how to fix cors policy error?

I am facing this error:
Access to fetch at 'http://localhost:3002/trpc/getBotTag?batch=1&input=%7B%7D' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.


But this is only happening on "use client" components.
Calling api from server components work fine.

export const api = experimental_createTRPCNextAppDirClient<
  typeof expressRouter
>({
  config() {
    return {
      links: [
        // loggerLink({
        //   enabled: (op) => true,
        // }),
        experimental_nextHttpLink({
          batch: true,
          url: "http://localhost:3002/trpc",
          // fetch(url, options) {
          //   return fetch(url, {
          //     ...options,
          //     credentials: "include", tried
          //   });
          // },
          // headers() {
          //   return {
          //     "x-trpc-source": "client", 
          //     "Access-Control-Allow-Origin": "*", tried
          //   };
          // },
        }),
      ],
    };
  },
});
image.png
Was this page helpful?