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
// };
// },
}),
],
};
},
});
No description
F
funki218d 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 🤔