用 Caddy 2 配置通用代理,解决跨域(CORS)问题
开发 CORS Caddy
Published: 2020-12-10

在前后端配合开发的时候,常常遇到跨源资源共享(CORS)的问题,很是烦人。解决跨域的问题也有各种方案,在此介绍一个简单、无侵入的方案,快速利用Caddy配置出一个专门允许跨域的反向代理服务。

Caddy 是一个现代的Web服务器,配置简单,具有自动HTTPS等优点。

快速使用

1. 编写配置文件

创建Caddyfile文件,写入如下内容:

:2020 {
    @options {
        method OPTIONS
    }
    header {
        Access-Control-Allow-Origin "{http.request.header.Origin}"
        Access-Control-Allow-Credentials true
        Access-Control-Allow-Methods *
        Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization
    }
    reverse_proxy 127.0.0.1:8080
    respond @options 204
}

其中,:2020是Caddy服务的端口号,可以按需修改, 127.0.0.1:8080是要代理的服务的地址,也可以按需修改。

2. 安装Caddy

在macOS上安装很简单,只要有Homebrew的情况下, 直接运行如下命令即可安装:

brew install caddy

其他系统下的安装也很简单,可以查看官方说明

3. 使用

在与配置文件(Caddyfile)的相同目录下运行如下命令即可:

# 启动
caddy start

# 停止
caddy stop

# 刷新配置
caddy reload