Caddy v2.1+ CORS whitelist

Caddyfile

(cors) {
        @cors_preflight{args.0} method OPTIONS
        @cors{args.0} header Origin {args.0}

        handle @cors_preflight{args.0} {
                header {
                        Access-Control-Allow-Origin "{args.0}"
                        Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
                        Access-Control-Allow-Headers *
                        Access-Control-Max-Age "3600"
                        defer
                }
                respond "" 204
        }

        handle @cors{args.0} {
                header {
                        Access-Control-Allow-Origin "{args.0}"
                        Access-Control-Expose-Headers *
                        defer
                }
        }
}
myawesomewebsite.com {
	root * /srv/public/
	file_server
	import cors https://member.myawesomewebsite.com
	import cors https://customer.myawesomewebsite.com
}

https://caddy.community/t/implementing-cors-whitelist-in-caddy-v2/8590/3

See previous revision for 2.0 approach https://gist.github.com/ryanburnette/d13575c9ced201e73f8169d3a793c1a3/cb5b4adea5b4a63ffdbb669eb1e911385b10d597

According to a stack overflow comment,

You should always append Vary: Origin header when you want to use multiple URLs, see: fetch.spec.whatwg.org/#cors-protocol-and-http-caches

(cors) {
  @origin{args.0} header Origin {args.0}
  header @origin{args.0} Access-Control-Allow-Origin "{args.0}"
  header @origin{args.0} Vary Origin
}

for anyone who lands here and is confused too: this method isn't a "full" solution as it requires the backend (file_server in this case, or the upstream for the case of reverse_proxy) to already support the OPTIONS method (for the preflight requests).

some routers such as koa-router support it out of the box and in this case, these headers are the only thing you need. for other things, these headers alone don't fully enable CORS.

Good comments, folks. I’m going to update this soon.

@mildsunrise To enable OPTIONS for the preflight request:

@options {
    method OPTIONS
}

respond @options 204

thank you. save my day.

@prawee Glad to hear it. I just updated the gist to include good advice from the comments.

I added the line:

header @origin{args.0} Access-Control-Allow-Headers "content-type, x-requested-with"

without it, I got the error: "[...] blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response"

@DER-SSt Thanks!

@DER-SSt Like this? https://gist.github.com/ryanburnette/d13575c9ced201e73f8169d3a793c1a3#file-caddyfile-L4

yes, thanks for the code!

(cors) {
        @cors_preflight{args.0} method OPTIONS
        @cors{args.0} header Origin {args.0}

        handle @cors_preflight{args.0} {
                header {
                        Access-Control-Allow-Origin "{args.0}"
                        Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
                        Access-Control-Allow-Headers *
                        Access-Control-Max-Age "3600"
                        defer   #turn on defer on your header directive to make sure the new header values are set after proxying
                }
                respond "" 204
        }

        handle @cors{args.0} {
                header {
                        Access-Control-Allow-Origin "{args.0}"
                        Access-Control-Expose-Headers *
                        defer
                }
        }
}

myawesomewebsite.com {
	root * /srv/public/
	file_server

	import cors https://member.myawesomewebsite.com
	import cors https://customer.myawesomewebsite.com
}

@C8opmBM

respond "" 204

is it right ?

Yes, it is 👍
reference: https://kalnytskyi.com/posts/setup-cors-caddy-2/

(cors) {
        @cors_preflight{args.0} method OPTIONS
        @cors{args.0} header Origin {args.0}

        handle @cors_preflight{args.0} {
                header {
                        Access-Control-Allow-Origin "{args.0}"
                        Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
                        Access-Control-Allow-Headers *
                        Access-Control-Max-Age "3600"
                        defer   #turn on defer on your header directive to make sure the new header values are set after proxying
                }
                respond "" 204
        }

        handle @cors{args.0} {
                header {
                        Access-Control-Allow-Origin "{args.0}"
                        Access-Control-Expose-Headers *
                        defer
                }
        }
}

myawesomewebsite.com {
	root * /srv/public/
	file_server

	import cors https://member.myawesomewebsite.com
	import cors https://customer.myawesomewebsite.com
}

import cors https://member.myawesomewebsite.com
import cors https://customer.myawesomewebsite.com

Two errors reported

Thank you @C8opmBM and @mmm8955405. Gist update to reflect your suggestions.

@ryanburnette This is finally making it onto the Webi cheatsheet: https://webinstall.dev/caddy

(though right now it's just in preview at https://next.webinstall.dev/caddy)

When you want to enable CORS for ANY domain, you have to use next configuration:

This is really a very rare case, but in my practice I often configure the caddy in such a way that it stands behind the traefik and is responsible for different domains.

(cors) {
	@cors_preflight method OPTIONS

	header {
		Access-Control-Allow-Origin "{header.origin}"
		Vary Origin
		Access-Control-Expose-Headers "Authorization"
		Access-Control-Allow-Credentials "true"
	}

	handle @cors_preflight {
		header {
			Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE"
			Access-Control-Max-Age "3600"
		}
		respond "" 204
	}
}

http:// {
	root * /srv/public/
	file_server

	import cors {header.origin}
}

Feel free to change exposed headers, methods etc :)