lowcgpa•11mo ago

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
          //   };
          // },
        }),
      ],
    };
  },
});

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
          //   };
          // },
        }),
      ],
    };
  },
});

1 Reply

funki•11mo ago

search "trpc cors" online, they have a documentation page for this. but generally cors is easy to fix when you control the backend. you just need to send a CORS header which is often a single line of code. though if you use next.js your frontend and backend should be on the same origin where CORS checking is disabled 🤔