CORS no working

[LRboyz]

What version of Hono are you using?

4.6.2

What runtime/platform is your app running on?

Bun

What steps can reproduce the bug?

I have two projects running locally Front end: http://localhost:6035 Backend: http://localhost:3000 I configured cors on the backend, the following is my configuration: backend

import { cors } from "hono/cors";

const app = new Hono().basePath("/api");

// 添加 CORS 中間件
app.use(
  "/api/*",
  cors({
    origin: ["http://localhost:6035", "http://localhost"],
    allowHeaders: ["Origin", "Content-Type", "Authorization", "X-Custom-Header", "Upgrade-Insecure-Requests"], // 允許的 headers
    allowMethods: ["OPTIONS", "GET", "POST", "PATCH", "PUT", "DELETE"], // 允許的 HTTP 方法
    exposeHeaders: ["Content-Length"], // 暴露的 headers
    maxAge: 600, // 預檢請求的結果可以被快取多久（秒）
    credentials: true // 是否允許發送 cookies
  })
);

client:

  const sendHeartbeat = useCallback(async () => {
    try {
      await ofetch(`${BASE_URL}/api/v1/heart/${userId}`, {
        method: "POST",
        headers: {
            Authorization: `Bearer ${authToken}`, // 添加授权头
        },
        body: { message: "ping" },
      });
    } catch (error) {
      console.error("Failed to send heartbeat:", error);
    }
  }, [userId]);

  useEffect(() => {
    sendHeartbeat(); // Send initial heartbeat

    const intervalId = setInterval(sendHeartbeat, HEARTBEAT_INTERVAL);

    return () => clearInterval(intervalId); // Cleanup on component unmount
  }, [sendHeartbeat]);

And the backend received the options request from the frontend, but the status code was 204？： And the front end still reports an error Cors： Did I do that step wrong? I tried all the methods mentioned in the issue but failed to solve the problem. I also tried deploying to vercel and the same thing happened. 🙏

What is the expected behavior?

httpCode: 200

What do you see instead?

httpCode: 204

Additional information

No response

[yusukebe]

Hi @LRboyz

Maybe this is not a bug. Please provide a minimal project to reproduce it. If not, we'll close this.

[yusukebe]

I'll close this since there has been no reaction for a while.

[bernardoforcillo]

i have a similar error using hono/vercel adapter(same site), tomorrow i will create a minimal project to reproduce the error.

[bernardoforcillo]

i have a similar error using hono/vercel adapter(same site), tomorrow i will create a minimal project to reproduce the error.

I'm building an signin system with google oauth, the bug cosist some times (code and verifier, for oauth ) cookies are stored on browser sometimes no

[lizyChy0329]

I have the same issue at "hono": "^4.6.17",

localhost:3000 => localhost:3006

const app = new Hono()

app.use(logger())

app.use(cors({
  origin: ['http://localhost:3000'],
  credentials: true,
}))

app.post('/api/site', (c) => c.json({ result: 'list authors' }))

const port = 3006
console.log(`Server is running on http://localhost:${port}`)

serve({
  fetch: app.fetch,
  port
})

[EdamAme-x]

Come to think of it, I recently ran into this same problem. I debugged it a bit, but it did not work even when I created my own middleware and set up CORS.

[lizyChy0329]

Come to think of it, I recently ran into this same problem.想想看，我最近也遇到了同样的问题。 I debugged it a bit, but it did not work even when I created my own middleware and set up CORS.我调试了一下，但即使我创建了自己的中间件并设置了 CORS，它也不起作用。

When I change origin to "*", it work. But I can't send the Cookie to back-end

app.use(cors({
  origin: "*",
  credentials: true,
}))

[yusukebe]

@EdamAme-x

Can you create a project to reproduce it?

[EdamAme-x]

I cannot recall the enviroment at that time, so I am sorry to say that it is difficult to reproduce. However, I do remember that we were using Hono on top of Next.js, so perhaps it is a Next.js issue.

If anyone else encounters the same problem, please explore if it is a Next.js issue.

[yusukebe]

@EdamAme-x Okay. Thanks!

[lizyChy0329]

I cannot recall the enviroment at that time, so I am sorry to say that it is difficult to reproduce.我记不清当时的环境了，所以很遗憾地说很难重现。 However, I do remember that we were using Hono on top of Next.js, so perhaps it is a Next.js issue.不过，我确实记得我们在 Next.js 之上使用 Hono，所以这可能是 Next.js 的问题。

If anyone else encounters the same problem, please explore if it is a Next.js issue.如果其他人遇到同样的问题，请检查是否是 Next.js 问题。

I just use create-react-app to start a server:3000 for React and start hono server:3006

[yusukebe]

@lizyChy0329

Can you put the project on GitHub and share it?

[yusukebe]

@lizyChy0329 Please don't use Google Drive! Put it on GitHub and share the URL.

[jjsessa]

Running into this issue also... strict-origin-when-cross-origin frontend on localhost:3000 backend on localhost:3001 (inside a docker container) cant seem to get the cors() to do anything

[guillermocalleja]

I have the same issue. It was working perfectly and today when I started developing locally I run into this issue.

Runtime: nodejs v22.13.1

My frontent is an Astro app v 5.4.0:

const response = await fetch(${import.meta.env.PUBLIC_API_URL}/api/auth/login, { method: 'POST', credentials: 'include', mode: 'cors', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), })

My backend is Hono v 4.6.16:

app.use('*', cors({ origin: ['http://localhost:4321',], allowHeaders: ['origin','Content-Type', 'aplication/json', 'Authorization'], allowMethods: ['POST', 'GET', 'OPTIONS'], credentials: true, maxAge:600 }))

I get this error:

One more detail. When I call the API from Postman Client it works perfectly. I have tested the Astro app from Brave, Chromium and Firefox and it does not work in any browser.

Is the problem that I get a 204 code in the preflight request and browsers don't allow this status answer?

[yusukebe]

This issue was closed. If you have a problem that you think is a bug, please create a new issue and write how to reproduce it. Bye.