Cloudflare 为 Cloudflare 页面去除自定义域上的标头

Posted 2023-02-19

【中文标题】Cloudflare 为 Cloudflare 页面去除自定义域上的标头

【英文标题】：Cloudflare strips headers on custom domain for Cloudflare Pages

【发布时间】：2021-09-04 23:49:51

【问题描述】：

我有一个 React 应用程序（托管在 Cloudflare Pages 上）使用我部署在 DigitalOcean 应用程序平台上的 Flask API。我分别为app.example.com 和api.example.com 使用自定义域。

当我尝试通过 Cloudflare Pages 提供的域 my-app.pages.dev 使用该应用程序时，我没有任何问题。

但是当我尝试通过我的自定义域 app.example.com 使用它时，我看到某些标头在对预检 OPTIONS 请求的响应中被剥离。这些是

access-control-allow-credentials: true
access-control-allow-headers: content-type
access-control-allow-methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
allow: POST, OPTIONS
vary: Origin

这会导致 CORS 出现问题，如浏览器控制台中所示：

CORS 政策已阻止从源“https://app.example.com”访问“https://api.example.com/auth/login”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：响应中“Access-Control-Allow-Credentials”标头的值为“”，当请求的凭据模式为“包含”时，该值必须为“真”。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

用户可以在 Cloudflare 提供的域 my-app.pages.dev 上毫无问题地登录，但每当他们尝试通过自定义域登录时，都会收到此错误。

另外一个细节：两种情况下预检请求的唯一区别是，浏览器在app.example.com上设置了以下内容

origin: https://app.example.com
referer: https://app.example.com/login
sec-fetch-site: same-site

以下是my-app.pages.dev

origin: https://my-app.pages.dev
referer: https://my-app.pages.dev/login
sec-fetch-site: cross-site

我使用带有support_credentials=True 的Flask-CORS 来处理API 上的CORS，并使用带有withCredentials: true 的axios 来使用前端的API。

这是由于我不知道的 Cloudflare 政策造成的吗？有人知道吗？

【参考方案1】：

我刚刚解决了这个问题。这是由于 DigitalOcean 上的应用规范。我对 YAML 文件进行了 CORS 特定设置：

我变了

- cors:
    allow_headers:
    - '*'
    allow_methods:
    - GET
    - OPTIONS
    - POST
    - PUT
    - PATCH
    - DELETE
    allow_origins:
    - prefix: https://app.example.com # <== I removed this line
    - regex: https://*.example.com
    - regex: http://*.example.com

到

- cors:
    allow_headers:
    - '*'
    allow_methods:
    - GET
    - OPTIONS
    - POST
    - PUT
    - PATCH
    - DELETE
    allow_origins:
    - regex: https://*.example.com
    - regex: http://*.example.com

作为参考，这是我用来调试问题的 cURL 命令：

curl -I -XOPTIONS  https://api.example.com \
    -H 'origin: https://app.example.com' \
    -H 'access-control-request-method: GET'

所以这不是因为 Cloudflare。有趣的是，DigitalOcean App Platform 流量默认通过 Cloudflare，这让我更加困惑。