Hono•8mo ago

Getting cors issues even though i've set it up properly

So i have a frontend client using nextjs and a my api using hono with cloudflare. for some reason my frontend client returns a cors issues but the api proceeds with the requests and returns a 200 repsonse.

my cors setup:

app.use("*", (c, next) => {
  if (c.req.header("Origin") == c.env.FRONT_END_URL) {
    return cors({
      origin: [c.env.FRONT_END_URL, c.env.API_URL], // Front end url for cors
      allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], // Allow specific methods
      allowHeaders: ["Content-Type", "Authorization"],
      exposeHeaders: ["Content-Length"],
      maxAge: 600,
      credentials: true,
    })(c, next);
  }

  return cors({
    origin: "*", // Allow all origins
    allowMethods: ["GET", "OPTIONS"],
  })(c, next);
});

app.use("*", (c, next) => {
  if (c.req.header("Origin") == c.env.FRONT_END_URL) {
    return cors({
      origin: [c.env.FRONT_END_URL, c.env.API_URL], // Front end url for cors
      allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], // Allow specific methods
      allowHeaders: ["Content-Type", "Authorization"],
      exposeHeaders: ["Content-Length"],
      maxAge: 600,
      credentials: true,
    })(c, next);
  }

  return cors({
    origin: "*", // Allow all origins
    allowMethods: ["GET", "OPTIONS"],
  })(c, next);
});

app.use("*", (c, next) => {
  if (c.req.header("Origin") == c.env.FRONT_END_URL) {
    return cors({
      origin: [c.env.FRONT_END_URL, c.env.API_URL], // Front end url for cors
      allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], // Allow specific methods
      allowHeaders: ["Content-Type", "Authorization"],
      exposeHeaders: ["Content-Length"],
      maxAge: 600,
      credentials: true,
    })(c, next);
  }

  return cors({
    origin: "*", // Allow all origins
    allowMethods: ["GET", "OPTIONS"],
  })(c, next);
});

app.use("*", (c, next) => {
  if (c.req.header("Origin") == c.env.FRONT_END_URL) {
    return cors({
      origin: [c.env.FRONT_END_URL, c.env.API_URL], // Front end url for cors
      allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], // Allow specific methods
      allowHeaders: ["Content-Type", "Authorization"],
      exposeHeaders: ["Content-Length"],
      maxAge: 600,
      credentials: true,
    })(c, next);
  }

  return cors({
    origin: "*", // Allow all origins
    allowMethods: ["GET", "OPTIONS"],
  })(c, next);
});

it used to be working however it has stopped.

please check the attached items for more info.

the repo: https://github.com/jacobsamo/BuzzTrip/tree/f8504ce6a164efc32eb2188eca24808cdf6d3fe9