Cors blocking using Hono.js and workers

Im using Hono. I add the code above to allow localhost access to my worker, and its worker well.

app.use("*", async (c, next) => {
  const corsMiddleware = cors({
    origin: ["http://localhost:3000"],
    allowMethods: ["GET", "OPTIONS", "POST", "PUT", "DELETE"],
    credentials: true,
  });
  return corsMiddleware(c, next);
});

app.use("*", async (c, next) => {
  const corsMiddleware = cors({
    origin: ["http://localhost:3000"],
    allowMethods: ["GET", "OPTIONS", "POST", "PUT", "DELETE"],
    credentials: true,
  });
  return corsMiddleware(c, next);
});

Now i trying use my next.js website deployed in the cloudFlare pages and i add cors policy:

app.use("*", async (c, next) => {
  const corsMiddleware = cors({
    origin: [
      "http://localhost:3000",
      "https://develop.scheduling-next-front-end.pages.dev",
    ],
    allowMethods: ["GET", "OPTIONS", "POST", "PUT", "DELETE"],
    credentials: true,
  });
  return corsMiddleware(c, next);
});

app.use("*", async (c, next) => {
  const corsMiddleware = cors({
    origin: [
      "http://localhost:3000",
      "https://develop.scheduling-next-front-end.pages.dev",
    ],
    allowMethods: ["GET", "OPTIONS", "POST", "PUT", "DELETE"],
    credentials: true,
  });
  return corsMiddleware(c, next);
});

But its not working. And i received BLOCK BY CORS POLICY.

1 Reply

PavanOP•5mo ago

I think that the blocking is happening before it reaches my application. Because when I remove the origin from http://localhost:3000 and try to access from localhost:3000 I have see the OPTIONS logs in the WORKER panel, but when I try to access from "https://develop.scheduling-next-front-end.pages.dev" I havent see the OPTIONS logs in the worker panel. Is there any CORS blocking in Cloud Flare before it reaches my application?

app.use("*", async (c, next) => {
  const corsMiddleware = cors({
    origin: ["*"],
    allowMethods: ["GET", "OPTIONS", "POST", "PUT", "DELETE"],
    credentials: true,
  });
  return corsMiddleware(c, next);
});

app.use("*", async (c, next) => {
  const corsMiddleware = cors({
    origin: ["*"],
    allowMethods: ["GET", "OPTIONS", "POST", "PUT", "DELETE"],
    credentials: true,
  });
  return corsMiddleware(c, next);
});

This way it works when calling from localhost:3000, but not from cloudflare pages (https://develop.scheduling-next-front-end.pages.dev)

Gaming

Programming

Cors blocking using Hono.js and workers