[SOLVED] CORS issue when deploying Flutter PWA behind Cloudflare Access

CORS issue when deploying Flutter PWA behind Cloudflare Access

For some reason the Flutter service worker cannot access the manifest.json file and issues the following error in the console:

'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.

I am logged into the project, and the site is otherwise working fine.

Solution

The index.html created by default contains the following line:

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

It is used to link to the manifest file required for Progressive Web Apps.

As Cloudflare Access requires credential use, we need to explicitly ask the browser to transfer the credentials across the request like so:

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