0

el problema que tengo es que estoy creando un html, css y js que se va ejecutar en la PC del usuario (LOCAL), es de uso interno, y por esto NO SE REQUIERE LEVANTAR UN SERVIDOR, pero no se como configurar mi Chrome para que lea los archivos JS sin infringir las Políticas de CORS (ya pase esta alcabala) y además no valide el mensaje de error con problemas con MIME.

Este es mi codigo:

Estructura de la Carpeta:

HTML
 |__ index.html
 |__ js
     |__main.js
     |__datos.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <script type="module" src="js/main.js"></script>

</body>
</html>

main.js

import robin from './datos.js';

console.log(robin); 

datos.js

var robin = {
  firstName: 'Robin',
  lastName: 'Wieruch',
};
export default robin;

Si ejecutamos esto en forma LOCAL (SIN SERVIDOR) nos da el siguiente mensaje de error:

Access to script at 'file:///C:/MI/RUTA/COMPLETA/HTML/js/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Sin embargo consegui una solucion, no estoy muy conforme, para saltarme el mensaje de error anterior y por eso la coloco y la explico paso a paso:

  1. Crear (aparte) un acceso directo de Google Chrome.
  2. Botón derecho "Propiedades"
  3. Donde dice "Destino:" colocar: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files file:///C:/MI/RUTA/COMPLETA/HTML/index.html

Ahora con este nuevo acceso directo creado lo ejecuto y ya NO SALE MENSAJE DE ERROR DE CORS y Si alguien tiene otra alternativa que pueda sugerirme se lo agradeceria. No se si se pueda crear una Exclusión en Google Chrome con la Ruta (file:///C:/MI/RUTA/COMPLETA/HTML/index.html) o se Pueda colocar el permiso directamente en alguna parte del html o Javascript

Lo cierto es que hasta aquí ya estaba contento, después de durar dias buscando una solución, logre saltar la política CORS, pero no todo es color rosa y ahora me sale el siguiente error en MIME:

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

Después de buscar otros días más una posible solucion lo unico que leo es que debo cambiar Type de Javascript de <script type="module" src="..."> a <script type="text/javascript" src="..."> pero si hago esto pierdo las opciones de Import y Export.

Agradecido por la atencion y espero que puedan ayudarme!! Tome en cuenta que esto es JAVASCRIPT NATIVO y SIN SERVIDORES LOCALES

1 respuesta 1

1

En tus archivos js estas haciendo uso de los módulos de ES6 y para ello es necesario servir tus archivos desde un servidor tal como lo indica la web de MDN.

Aquí te dejo lo mas relevante.

Para que los módulos funcionen correctamente en un navegador, debe asegurarse de que su servidor los esté sirviendo con un encabezado de tipo de contenido que contenga un tipo MIME de JavaScript, como texto / javascript. Si no lo hace, obtendrá un estricto error de comprobación de tipo MIME en la línea de "El servidor respondió con un tipo MIME que no es JavaScript" y el navegador no ejecutará su JavaScript. La mayoría de los servidores ya configuraron el tipo correcto para los archivos .js, pero aún no para los archivos .mjs. Los servidores que ya sirven archivos .mjs correctamente incluyen GitHub Pages y http-server para Node.js

UNA OPCIÓN

Si no quieres perder tiempo creando tu propio servidor puedes usar este paquete de npm para servir tus ficheros estáticos. Es fácil de usar y es configurable.

Para ello tendrás que tener instalado Nodejs. Cuando instalas node también se te instala el manejador de dependencias de node (NPM).

OTRA OPCIÓN

Sino quieres instalar dependencias ni nada por el estilo puedes insertar tu código javascript mediante el tag <script>, con esta opción no podras usar ESM(EcmaScript Modules). Tendrás que tener en cuenta el orden de los scripts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="datos.js"></script>
    <script src="main.js"></script>
</body>
</html>
5
  • Gracias por tu comentario @ajuni880 quisiera preguntarte, antes de cerrar y dar como correcta tu respuesta, con FETCH me pasa lo mismo me salen mensajes de error, es por el mismo motivo?? Commented el 7 abr. 2020 a las 12:40
  • @MiguelArias depende donde hagas la fetch si haces la petición a tu servidor que esta corriendo en el mismo servidor no deberían salirte los errores. Si no es asi, es probable sea por los CORS. Puedes poner tu codigo en la pregunta para ver que haces?
    – hawks
    Commented el 7 abr. 2020 a las 12:54
  • gracias de nuevo, estoy intentando hacer esto SIN SERVIDOR fetch(misdatos.txt).then(function(response) { return response.text(); }) .then(function(data) { console.log('data = ', data); }) .catch(function(err) { console.error(err); }); Commented el 7 abr. 2020 a las 13:30
  • prueba esto fetch('./misdatos.txt', {mode: 'no-cors'}) .then(response => response.text()) .then(data=> console.log(data)) .catch(error => console.error(error)); pero no garantizo que funcione en todos los navegadores. Es mejor servir los ficheros desde un server(se que no puedes)
    – hawks
    Commented el 7 abr. 2020 a las 13:37
  • de nuevo gracias, nada que funcione sin servidor, este es el mensaje de error: Fetch API cannot load file:///C:/MI/RUTA/COMPLETA/HTML/misdatos.txt. URL scheme "file" is not supported. Commented el 7 abr. 2020 a las 13:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.