如何在Caddy反向代理Caddyfile中配置CORS解决跨域拦截

你的Caddyfile中CORS配置存在两个核心问题，导致跨域请求被浏览器拦截：

1. 匹配器逻辑错误：@origin header Origin "*" 中的*会被当作字面量处理，只会匹配Origin头恰好为*的请求，而实际浏览器发送的Origin是具体域名（如http://localhost:3000），因此该匹配器无法命中请求，CORS响应头不会被添加。
2. 未处理OPTIONS预请求：跨域请求发起前，浏览器会先发送OPTIONS预请求验证权限，你的配置没有单独处理这类请求，导致后端可能返回不符合要求的响应。

以下是修正后的Caddyfile配置：

(cors) {
        # 匹配OPTIONS预请求
        @cors_preflight method OPTIONS
        # 匹配所有带Origin头的请求
        @cors_request header Origin *

        # 直接响应OPTIONS预请求，无需转发到后端
        respond @cors_preflight 200 {
                header Access-Control-Allow-Origin "*"
                header Access-Control-Allow-Methods "OPTIONS,HEAD,GET,POST,PUT,PATCH,DELETE"
                header Access-Control-Allow-Headers "Content-Type,Authorization,Accept"
        }

        # 为常规跨域请求添加CORS响应头
        header @cors_request Access-Control-Allow-Origin "*"
        header @cors_request Access-Control-Allow-Methods "OPTIONS,HEAD,GET,POST,PUT,PATCH,DELETE"
        header @cors_request Access-Control-Allow-Headers "Content-Type,Authorization,Accept"
}

myDomain {
        import cors
        reverse_proxy * {
                to 127.0.0.1:8000
                to 127.0.0.1:8001
                to 127.0.0.1:8002
                to 127.0.0.1:8003
                to 127.0.0.1:8004
                to 127.0.0.1:8005
                lb_policy round_robin
                lb_try_duration 1s
                lb_try_interval 250ms
        }
}

关键修改说明 #

• 拆分了两个匹配器，分别处理OPTIONS预请求和常规跨域请求，确保所有跨域场景都被覆盖
• header Origin * 中的*是Caddy的通配符，用于匹配任何存在Origin头的请求（而非字面量*）
• 对OPTIONS请求直接返回200状态码，避免转发到后端引发不必要的错误
• 确保所有需要CORS权限的请求都能获取到合规的响应头

内容的提问来源于stack exchange，提问作者RaiD Ouahioune