How CORS Middleware is Configured for the Hono Application in y-gui

The y-gui project configures CORS in backend/src/index.ts by applying Hono's built-in cors() middleware to all routes with a wildcard origin, allowing standard HTTP methods plus the Authorization header, and caching preflight requests for 24 hours.

The y-gui repository demonstrates a straightforward approach to cross-origin resource sharing in Hono-based applications. In the main entry point, the development team attaches the official hono/cors middleware immediately after instantiating the Hono app, ensuring consistent CORS handling across all API endpoints.

Main CORS Configuration in backend/src/index.ts

According to the y-gui source code, the primary CORS setup occurs in the application's entry point at backend/src/index.ts. The configuration uses the cors() middleware from the hono/cors package and applies it globally using the '*' route pattern.

// backend/src/index.ts
app.use('*', cors({
  origin: '*',
  allowHeaders: ['Content-Type', 'Authorization'],
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  maxAge: 86400,
}));

This setup explicitly permits any origin ('*'), which is typical for development environments or public API scenarios. The middleware intercepts all incoming requests to set the appropriate access-control headers before they reach your route handlers.

CORS Parameters Explained

Origin and Headers

The origin: '*' setting allows requests from any domain. The allowHeaders array restricts acceptable request headers to Content-Type and Authorization, which covers JSON payloads and bearer token authentication commonly used in the application.

HTTP Methods and Caching

The middleware permits standard REST operations via the allowMethods array, including GET, POST, PUT, DELETE, and OPTIONS. The maxAge: 86400 directive tells browsers to cache preflight responses for 24 hours (86,400 seconds), reducing redundant OPTIONS requests and improving client-side performance.

Alternative Custom Helper

While the main application relies on the official Hono middleware, the repository includes a secondary module at backend/src/middleware/cors.ts. This file defines static CORS headers and a handleCors function for manual handling scenarios. However, the default configuration does not utilize this helper for standard route processing, reserving it for specialized edge cases or future extensions.

Complete Implementation Example

To replicate the y-gui CORS setup in your own Hono project, import the middleware and attach it immediately after creating your app instance:

import { Hono } from 'hono';
import { cors } from 'hono/cors';

const app = new Hono();

app.use('*', cors({
  origin: '*',
  allowHeaders: ['Content-Type', 'Authorization'],
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  maxAge: 86400,
}));

// Your routes follow...
app.get('/api/data', (c) => {
  return c.json({ status: 'ok' });
});

If you need to use the custom helper from backend/src/middleware/cors.ts for specific manual handling:

import { handleCors } from './middleware/cors';

app.options('/custom-path', (c) => {
  const response = handleCors(c.req.raw);
  return response instanceof Response ? response : new Response(null, { headers: response });
});

Summary

• The CORS middleware is registered in backend/src/index.ts using app.use('*', cors(...)) immediately after Hono instantiation.
• Configuration allows all origins with Content-Type and Authorization headers explicitly permitted.
• HTTP methods covered include GET, POST, PUT, DELETE, and OPTIONS.
• Preflight caching is set to 86,400 seconds (24 hours) to minimize redundant requests.
• A custom helper exists at backend/src/middleware/cors.ts but remains unused by the default application configuration.

Frequently Asked Questions

Where is the CORS middleware configured in y-gui?

The configuration resides in backend/src/index.ts, where the built-in cors middleware from hono/cors is attached to the Hono application instance immediately after creation.

What origins are allowed by default?

The configuration sets origin: '*', which permits cross-origin requests from any domain. This wildcard approach is suitable for development or publicly accessible APIs.

How long are preflight requests cached?

The maxAge parameter is set to 86400 seconds, equivalent to 24 hours. This tells browsers to reuse the preflight response without issuing new OPTIONS requests during that period.

Is the custom CORS helper used instead of Hono's middleware?

No, the application primarily uses the official hono/cors middleware for all routes. The custom helper defined in backend/src/middleware/cors.ts provides an alternative implementation but is not active in the default server configuration.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}