Access to web manifest blocked by CORS policy

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.