Newly created JSS react app does not start and show blank page

Question

The newly created JSS react app does not start. It shows completely blank page and shows error in the console while accessing the public URL i.e. http://jssreactweb/, Using fresh install of Sitecore 9.1.

Access to fetch at 'http://jss.sc/sitecore/api/jss/dictionary/JssReactWeb/en?sc_apikey={867CBF59-08E5-4B74-A106-A34485DB1D92}' from origin 'http://jssreactweb' 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.

Here is the console log.

Answer 1

First thing you need to do is to check if the CORS Origins in your API key is not empty and should allow something, you can use * for allowing all.

Secondly, while accessing the public URL i.e. http://jssreactweb/ (may be different depending on your installation and configurations) You need to publish this API key. (It will be nice if you publish the whole website.)

Answer 2

For me, the app already existed and was working fine. After some deployments, the app started showing plain white page without any error. I found that the JSS files in my local Sitecore instance got corrupted. I reinstalled JSS package and it fixed the issue.