Tengo una aplicación React+Node.js que funciona bien en localhost, pero se ejecuta en errores cuando se implementa en Heroku, lo que resulta en un estado de respuesta 404.
Estos son los errores de la consola que recibo al cargar la aplicación en Chrome:
Refused to load the script 'https://ssl.google-analytics.com/ga.js' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback. (anonymous) @ 1:3 Refused to load the script 'https://www.pagespeed-mod.com/v1/taas?id=cs&ak=55c85bbdd6e4d21e7278fbbbb89a9502&si=fb4741a02e044f61940836e20590e7f6&tag=1005&rand=7e511f5336f16d2e87e9ac560e754a19&ord=7220108846457940' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback. (anonymous) @ 1:3 myapp.herokuapp.com/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Lato:300,400,700,900' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback. DevTools failed to load source map: Could not load content for chrome-extension://mihdfbecejheednfigjpdacgeilhlmnf/react-draggable.js.map: System error: net::ERR_BLOCKED_BY_CLIENT myapp.herokuapp.com/:1 (warning) Failed to load resource: the server responded with a status of 404 (Not Found) He intentado agregar correcciones para script-src y style-src en public/index.html, public/manifest.json, src/server/index.js y App.js, pero siempre veo los mismos errores.
Intento de corrección de frontend:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src-elem 'self' 'unsafe-inline' https://ssl.google-analytics.com https://www.pagespeed-mod.com; style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com; object-src 'self'" />Intento de corrección de backend:
const helmet = require("helmet") ... app.use( helmet({ contentSecurityPolicy: false, }) )La política "default-src 'none'" está configurada en algún lugar y, aunque intente agregar otra política, esta política siempre se aplica y bloquea todo el contenido. Deberá identificar dónde se establece la política existente y luego modificarla.