Cloudflare Pages CORS配置与跨域问题解决方案

1. 问题背景与现象分析

最近在调试一个部署在Cloudflare Pages上的前端项目时，遇到了典型的CORS跨域问题。具体表现为：当从其他域名下的网页向该Pages服务发起资源请求时，浏览器控制台抛出错误提示"has been blocked by CORS policy: Response to preflight request doesn't pass access control check"。

这种情况通常发生在以下场景：

• 前端应用部署在domain-a.com
• 静态资源部署在Cloudflare Pages（如project.pages.dev）
• 当domain-a.com尝试加载project.pages.dev上的资源时触发CORS策略

2. CORS机制深度解析

2.1 跨域安全策略的本质

浏览器同源策略(Same-Origin Policy)是Web安全的重要基石，它限制了一个源(协议+域名+端口)的文档或脚本如何与另一个源的资源进行交互。CORS(Cross-Origin Resource Sharing)则是W3C标准，允许服务器声明哪些外部源有权访问其资源。

2.2 预检请求(Preflight)机制

对于可能对服务器数据产生副作用的HTTP请求方法（特别是GET以外的请求），浏览器必须首先使用OPTIONS方法发起一个预检请求。服务器需要响应以下关键头部：

http复制Access-Control-Allow-Origin: https://domain-a.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

3. Cloudflare Pages的CORS配置方案

3.1 通过_headers文件配置

在项目根目录创建_headers文件，添加如下规则：

code复制/*
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: GET, HEAD, OPTIONS
  Ac