Cloudflare 在 Cloudflare 页面的自定义域上删除 headers

Question

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

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

但是当我尝试通过我的自定义域 app.example.com 使用它时，我看到某些 headers 在对预检选项请求的响应中被删除。这些是

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 出现问题，如浏览器控制台中所示：

Access to XMLHttpRequest at 'https://api.example.com/auth/login' from origin 'https://app.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

用户可以在 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

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

这是因为我不知道的 Cloudflare 政策吗？有人知道吗？

Answer 1

我刚刚解决了这个问题。这是由于 DigitalOcean 上的 App Spec。我在 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，这让我更加困惑。

Cloudflare 在 Cloudflare 页面的自定义域上删除 headers

Cloudflare strips headers on custom domain for Cloudflare Pages

cookies

cors

cloudflare

axios