在 Cloudflare Access 后面部署 Flutter PWA 时出现 CORS 问题

Question

由于某种原因，Flutter Service Worker 无法访问

manifest.json

文件并在控制台中发出以下错误：

'https://project.cloudflareaccess.com/cdn-cgi/access/login/122d863.project.pages.dev?kid=4075c415d129a4&redirect_url=%2Fmanifest.json&meta=eyJraWc0Mvf9_0ihE4q1jWkWPfWPDwPzfoVMkj3UsrTDMWQX1bW85DfiUv2bwSKXYBTVA'
(redirected from 'https://122d863.project.pages.dev/manifest.json')
from origin 'https://122d863.project.pages.dev' has been blocked by
CORS policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource. If an opaque response serves your needs, set the
request's mode to 'no-cors' to fetch the resource with CORS disabled.

我已登录该项目，该网站在其他方面工作正常。

Answer 1

默认创建的

index.html

包含以下行：

<link rel="manifest" href="manifest.json">

它用于链接到渐进式 Web 应用程序所需的清单文件。

由于 Cloudflare Access 需要使用凭据，我们需要明确要求浏览器在请求中传输凭据，如下所示：

<link rel="manifest" href="manifest.json" crossorigin="use-credentials">