简单地使用 Caddy 实现 CORS 配置

Sun Apr 27 2025

其实可以在后端实现 CORS 配置，但是在后端实现 CORS 不算是很方便管理。既然已经使用了 Caddy，那为什么不利用强大的 Caddy 实现 CORS 配置？

查阅文档发现 Caddy 本身不支持直接写 CORS 的配置，但是 CORS 基本上是使用 HTTP Header 来实现的¹，所以我们应该只需要写对应的 HTTP Header 就行了:

1
:80{
2
    header {
3
        Access-Control-Allow-Origin *
4
        Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE"
5
        Access-Control-Allow-Headers "Content-Type"
6
    }
7
    ...
8
}

然后我发现了个更奇妙的写法：Caddy 有 snippet²，利用 snippet 一样可以做到这样的效果并且可移植性更好（大概？）

下面这段粘贴复制出去就可以用了，非常方便

1
(cors) {
2
  @cors_preflight method OPTIONS
3
  @cors header Origin {args.0}
4

5
  handle @cors_preflight {
6
    header Access-Control-Allow-Origin "{args.0}"
7
    header Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE"
8
    header Access-Control-Allow-Headers "Content-Type"
9
    header Access-Control-Max-Age "3600"
10
    respond "" 204
11
  }
12

13
  handle @cors {
14
    header Access-Control-Allow-Origin "{args.0}"
15
    header Access-Control-Expose-Headers "Link"
16
  }
17
}

然后在站点配置里如下引用：

1
:80 {
2
    import cors *
3

4
    handle_path /* {
5
        reverse_proxy localhost:8080
6
    }
7
}

MDN ↩
Caddy snippet ↩

简单地使用 Caddy 实现 CORS 配置

Footnotes