如何通过Cloudflare配置Access-Control-Allow-Origin解决CORS问题

针对你遇到的预检请求因缺少Access-Control-Allow-Origin头被拦截的问题，新版Cloudflare已不再推荐使用Page Rules，改用**Transform Rules（转换规则）**来添加CORS响应头，无需修改后端配置，具体操作步骤如下：

步骤1：创建响应头修改规则 #

1. 登录Cloudflare控制台，进入目标域名dd-demo.abc.com的管理面板。
2. 左侧菜单选择 Rules -> Transform Rules。
3. 切换到 Modify Response Headers 标签页，点击 Create rule。

配置规则匹配条件 #

• 规则名称自定义（例如Add CORS Headers for API Token）。
• 在「When incoming requests match」区域，添加两个匹配条件：
  • 条件1：选择Hostname，匹配值填dd-demo.abc.com:8443；
  • 条件2：选择Path，匹配方式选starts with，值填/api/token（若需覆盖整个API路径，可填/api/*）。

添加CORS必要响应头 #

在「Then」区域，选择 Set static response header，依次添加以下头信息：

• 头名称：Access-Control-Allow-Origin，值填https://dd-demo.abc.com（指定允许的请求源，不建议用*，避免安全风险）；
• 头名称：Access-Control-Allow-Methods，值填GET, POST, OPTIONS, PUT, DELETE（覆盖预检请求及实际请求的常用方法）；
• 头名称：Access-Control-Allow-Headers，值填Content-Type, Authorization（根据你的请求实际携带的自定义头调整）；
• （可选）若请求需携带Cookie或认证信息，添加头Access-Control-Allow-Credentials，值设为true。

步骤2：处理OPTIONS预检请求 #

浏览器发送的OPTIONS预检请求需要返回200状态码，否则会触发CORS错误，需额外创建规则：

1. 同样在 Transform Rules -> Modify Response Headers 页面，点击 Create rule。
2. 匹配条件设置为：Request Method等于OPTIONS，同时匹配上述的Hostname和Path。
3. 在「Then」区域选择 Set status code，值设为200。

注意事项 #

• 确保你的域名在Cloudflare处于橙色云状态（流量经过Cloudflare转发），否则规则不会生效；
• 若自定义端口8443未在Cloudflare配置，可前往 SSL/TLS -> Edge Certificates 确认是否支持该端口，或考虑将API服务迁移到默认的443端口，提升兼容性；
• 规则保存后需等待1-5分钟生效，之后重新测试文件提交请求。

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