Web App Manifest blocked by CORS when hosted behind authentication

[WillsB3]

Stencil version:

@stencil/[email protected]

I'm submitting a: [x] bug report [ ] feature request [ ] support request

Current behavior: Currently, when deploying a Stencil site / app to a host behind authentication, the manifest file fails to load with the following error:

Access to manifest at 'https://path.to/my-site/manifest.json' from origin 'https://path.to' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Expected behavior: The manifest should be loaded with crossorigin="use-credentials" so that the browser sends the auth credentials when requesting the manifest. See MDN for details.

Steps to reproduce:

1. Deploy the starter app to a location that is behind authentication.
2. Open DevTools and observe that the manifest does not load due to a CORS error.

Other information: I'm not sure where the template for the generated index.html file lives, but I believe this fix should be as simple as changing:

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

to

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

[patrickfoley]

Hey man, this helped me solve the same issue for an S3/CloudFront website - thanks for making it google-able!

[iamhammadaali]

How Can i solve this problem? adding crossorigin is not solving this.

[pranaynailwal]

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

this worked for me too.

[marcchew]

it doesn't work

[splitinfinities]

Adding crossorigin may be the initial solution we come to, however there may be more circumstances where this cannot work. We will need more information - can you please create a reproduction repo and link here? If you can also speak to any nginx/Apache/Aws rules you set, that would help as well.

[jayaamamidala]

Adding <link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials"> did not solve the problem, are there any other suggestions for this ?

[tmchow]

I had same issue and was tearing my hair out. crossorigin="use-credentials" worked for us! Thanks!

[kushankurdas]

replace this with <link rel="manifest" href="./manifest.json" /> will solve the issue

[ManiMatter]

this worked for me too.

[abhijith1741]

hey, the issue is happen not only because of the crossorigin, may be you run the web app through the path. so instead of that run it with a live server issues will be resolve.

[joaoefmota]

My app is hosted on Azure, and the container only allows authenticated traffic. So, the PWA runs except the images do not render until the page is hard refreshed. So, in this scenario, it routes the user to the login page (Microsoft) and then, once back to the PWA landing page, puff we have the images rendered. It is not a desired behaviour for sure. By checking the console on the browser, I can see that the access to font, manifest and internal resource are blocked by CORS policy (No access-Control-Allow-Origin header), even if I inclued the crossorigin="use-cedentials" on my index.html. No idea how do solve this, any clue please?