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

> Discover how y-gui configures CORS middleware for Hono applications. Learn about wildcard origins, allowed methods, and preflight request caching in this technical guide.

- Repository: [luohy15/y-gui](https://github.com/luohy15/y-gui)
- Tags: how-to-guide
- Published: 2026-03-06

---

**The y-gui project configures CORS in [`backend/src/index.ts`](https://github.com/luohy15/y-gui/blob/main/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`](https://github.com/luohy15/y-gui/blob/main/backend/src/index.ts). The configuration uses the `cors()` middleware from the `hono/cors` package and applies it globally using the `'*'` route pattern.

```typescript
// 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`](https://github.com/luohy15/y-gui/blob/main/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:

```typescript
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`](https://github.com/luohy15/y-gui/blob/main/backend/src/middleware/cors.ts) for specific manual handling:

```typescript
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`](https://github.com/luohy15/y-gui/blob/main/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`](https://github.com/luohy15/y-gui/blob/main/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`](https://github.com/luohy15/y-gui/blob/main/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`](https://github.com/luohy15/y-gui/blob/main/backend/src/middleware/cors.ts) provides an alternative implementation but is not active in the default server configuration.