部署到 heroku 时，React 应用程序不显示任何内容

Question

My app was built successfully without any errors. However, it only shows up a blank page when I try to open it. The error on the Chrome dev tools that I got are:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-eE1k/Cs1U0Li9/ihPPQ7jKIGDvR8fYw65VJw+txfifw='), or a nonce ('nonce-...') is required to enable inline execution.

Refused to load the script 'https://www.google-analytics.com/analytics.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to load the script 'https://www.pagespeed-mod.com/v1/taas?id=cs&ak=32b001198a46647f164402ebaec7a88c&si=d07acaa3a5ff4a4f99b12b98acafe347&tag=1005&rand=elUWG4o247dNBGXBV31uSeN1epHHQ1Qs&ord=4755781515134192' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

and I have no idea what I did wrong. Does anyone have any idea? Thanks

Answer 1

Did you find a solution?

I have run into the same problem yesterday and found this thread as well. For me, Helmet was causing this problem. Do you use it in your express server?

Helmet 4.0 automatically sets Content Security Policy to a default strict value, while Helmet 3.x didn't do this previously (that's why I encountered this problem yesterday when I updated it to 4.0).

So if you have Helmet installed, this should help:

app.use(helmet({
  contentSecurityPolicy: false,
}));

For more info - https://helmetjs.github.io/

Answer 2

For me works that:

In server.js adds:

app.use(
  helmet({
    contentSecurityPolicy: false,
  }),
);

and in package.json into scripts adds:

"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",