CORS origin from environment variables?

[franklloydteh]

It seems that you can read the origin of the request and base the allowed CORS origin from it based on the docs:

cors({
  origin: (origin) => {
    return origin.endsWith('.example.com') ? origin : 'http://example.com'
  },
})

But this is not what I want. I want to restrict the CORS origin depending on the environment url (DEV, QA, UAT, PROD). Is there a way to get context.env.SOME_URL and use that as CORS origin?

[yusukebe]

@franklloydteh

Try it like this:

https://hono.dev/getting-started/cloudflare-workers#using-variables-in-middleware

[franklloydteh]

Thank you for the quick reply. This is works great!

[stephent]

@franklloydteh @yusukebe are you able to share how you got this working with the cors middleware? I can't seem to adapt the linked example for basicAuth in a way that works. Thanks in advance for any additional guidance you can share.

[franklloydteh]

Hi @stephent this is my setup.

On a separate CorsConfig.ts file:

export const CorsConfig = async (c: Context, next: () => any) => {
	const corsConfig = cors({
		origin: [c.env.FRONTEND_URL], 
		allowHeaders: ['Content-Type', 'Authorization'],
		allowMethods: ['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH', 'OPTIONS'],
		exposeHeaders: ['Content-Length'],
		maxAge: 1200,
		credentials: true
	});
	return corsConfig(c, next);
};

Then in the main index.ts file:

import { CorsConfig } from './config/CorsConfig';
...
const app = new Hono<{ Bindings: HonoBindings }>();
...
app.use('*', CorsConfig);
...
export default app;

Please note that you must be using Module Worker Mode:

https://hono.dev/getting-started/cloudflare-workers#service-worker-mode-or-module-worker-mode

[stephent]

Thank you @franklloydteh. Not quite sure where I was going wrong as this makes perfect sense!