Access to web manifest blocked by CORS policy

Question

I am trying to use manifest.json in my PWA. I have created a simple index.html file in a directory. I also have a manifest.json file in the directory.

Now I linked the manifest file like so::

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

Now when I open my index.html file, the console gives an error saying it cannot fetch the manifest file due to blockage by same origin policy. How do I fix this? It's probably because I am using File protocol to open my html. And if possible, please explain why this happens, and why can I load CSS files in the same way.

Answer 1

CrossOrigin Attribute

I realize this question already has an accepted answer, but I received the following error when loading our web manifest file behind our central authentication service:

Access to manifest at 'https://logindev.domain.edu/cas/login?service=https://reactjs.int.domain.edu/sis/quickclassify/manifest.json' (redirected from 'https://reactjs.int.domain.edu/sis/quickclassify/manifest.json') from origin 'https://reactjs.int.domain.edu' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

And the solution for me was to add the crossorigin="use-credentials" attribute to the manifest's link element.

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