Si te has encontrado con este error: Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en file:///home (razón: la solicitud CORS no es http).
El error ocurre porque estás intentando realizar una solicitud desde un
origen no permitido por la política de mismo origen. En este caso, el
frontend está intentando acceder al backend desde un archivo local
(file://), lo cual no es considerado un origen válido para
solicitudes HTTP según las reglas de CORS.
Solución al problema
La solución es ejecutar tu archivo de frontend en un servidor HTTP local.
Esto puede hacerse fácilmente utilizando herramientas como
http-server o cualquier servidor integrado en tu entorno.
Pasos para corregir el error
Instalar un servidor HTTP para el frontend Utiliza una
herramienta como http-server para servir el archivo del
frontend desde un origen HTTP válido.
npm install -g http-serverInstálalo con npm:
Navega a la carpeta del frontend (donde está el archivo
index.html) y ejecuta:
http-server
Esto creará un servidor HTTP local, y el frontend estará accesible
desde una URL como http://localhost:8080.
Actualizar el backend El backend ya tiene CORS habilitado
correctamente, pero debes asegurarte de que las solicitudes CORS puedan
llegar desde el origen de tu frontend
(http://localhost:8080).
const express = require("express");
const cors = require("cors");
const app = express();
// Configurar CORS para permitir solicitudes desde el frontend
app.use(cors({
origin: "http://localhost:8080", // Origen permitido
methods: ["GET", "POST"],
allowedHeaders: ["Content-Type"],
}));
// Middleware para procesar JSON
app.use(express.json());
const data = {
inicio: { mensaje: "Bienvenido a Inicio" },
servicios: { mensaje: "Servicios Disponibles" },
productos: { mensaje: "Catálogo de Productos" },
usuarios: { mensaje: "Gestión de Usuarios" },
configuracion: { mensaje: "Opciones de Configuración" },
ayuda: { mensaje: "Preguntas Frecuentes" },
};
// Endpoint dinámico
app.get("/module/:name", (req, res) => {
const moduleName = req.params.name;
res.json(data[moduleName] || { mensaje: "Módulo no encontrado." });
});
// Configurar el servidor
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Servidor corriendo en http://localhost:${PORT}`);
});
En este código:
-
Solo se permiten solicitudes desde
http://localhost:8080. - La configuración de CORS evita cualquier bloqueo de origen.
Acceder al frontend y backend
-
Asegúrate de que el backend esté ejecutándose en
http://localhost:3000. -
Accede al frontend desde
http://localhost:8080(servido porhttp-server). -
Realiza solicitudes desde el frontend utilizando la URL del backend
(
http://localhost:3000).
Después de realizar estas modificaciones:
Inicia el backend: node app.js
http-server
Sirve el frontend con node app.js:
http-server
Abre el frontend en el navegador desde http://localhost:8080 y
verifica que las solicitudes al backend funcionen correctamente.
¿Qué es http-server?
http-server es una herramienta sencilla y ligera que se utiliza para crear rápidamente un servidor web estático. Esto significa que puedes usarlo para alojar y servir archivos (como HTML, CSS, JS) en tu máquina o entorno de trabajo sin necesidad de configuraciones complejas.
Es una herramienta basada en Node.js, y se instala a través de npm (Node Package Manager). Es especialmente útil para desarrolladores que necesitan probar sitios o aplicaciones web localmente.
¿Para qué sirve?
http-server sirve para:
- Alojar contenido estático: Ideal para páginas web o prototipos que no requieren procesamiento del lado del servidor.
- Pruebas locales: Permite a los desarrolladores ejecutar su sitio web en un entorno local antes de implementarlo en un servidor más robusto.
- Proyectos rápidos: Cuando necesitas un servidor temporal para compartir o mostrar contenido de forma sencilla.
- Simplificar tareas: En lugar de configurar un servidor completo como Apache o Nginx, http-server te permite hacerlo en segundos.
¿En qué se fundamenta?
http-server se basa en Node.js, lo que significa que utiliza el
motor JavaScript V8 y su módulo integrado http para manejar
solicitudes y respuestas HTTP. El fundamento técnico es ofrecer un servidor
minimalista compatible con los protocolos HTTP/HTTPS para servir recursos
estáticos.
Al no tener funciones avanzadas como procesamiento del lado del servidor o bases de datos, es ideal para tareas simples y rápidas.
Rutinas HTTP Web Server
Las rutinas HTTP Web Server se utilizan para ejecutar y configurar los servicios del servidor web integrado.
Un HTTP o un servidor web tramita solicitudes a través de HTTP, un protocolo de red utilizado para intercambiar información en la World Wide Web (WWW). La función principal de un servidor HTTP es almacenar, procesar y entregar páginas web a los clientes. Las páginas entregadas suelen ser documentos HTML, que pueden incluir imágenes, hojas de estilo y scripts, además de contenido de texto. Usando HTML, usted describe cómo debe ser una página, qué tipos de fuentes usar, qué color debe ser el texto, dónde deben venir las marcas de los párrafos, y muchos más aspectos del documento.
Utilizando SSL/TLS, puedes comunicarte de forma segura con el servidor web a través de HTTPS. El componente de software ARM mbed TLS permite esto para el servidor web del componente de red. Consulte Comunicación segura para obtener más información.
Hay dos tipos de páginas web que se almacenan en un servidor web y se envían a un cliente web bajo petición:
- Las páginas web estáticas no cambian su contenido. Cuando se solicita la página, se envía al cliente web tal y como está. No se modifica.
- Las páginas web dinámicas se generan cuando se solicita la página. Páginas que muestran la configuración del sistema o registros de registro son ejemplos de páginas dinámicas.
El componente de red los soporta. Las páginas web estáticas se almacenan generalmente en un sistema de archivos ROM. Los archivos se convierten en código C por el convertidor de archivos FCARM y compilados en código.
Esta documentación se separa de la siguiente manera:
- El contenido web dinámico se puede generar usando CGI y JavaScript.
- Entregar Páginas Web admite contenido estático y dinámico y se puede utilizar con caché del navegador.
- Control Interface explica cómo iniciar/parar el servidor HTTP y gestionar las cuentas de usuario integradas.
- La interfaz de acceso e integrador muestra cómo filtrar los hosts, que no están autorizados a conectarse al HTTP Server y cómo agregar cuentas de usuario adicionales y gestionar los derechos de acceso de cada usuario.
- File System Interface le da detalles sobre las funciones que se utilizan para leer/escribir datos en el dispositivo de almacenamiento del servidor HTTP.
- Common Gateway Interface (CGI) explica las funciones del script que se utilizan para el lenguaje de scripting.
- La configuración explica las opciones de configuración del servidor HTTP.
- La utilidad FCARM File Converter se puede utilizar para comprimir páginas web estáticas para almacenar en ROM.
¿Es un estándar internacional?
No, http-server no es un estándar internacional, pero usa el protocolo HTTP, que sí es un estándar internacional definido por la Internet Engineering Task Force (IETF). http-server es simplemente una herramienta implementada bajo los principios del protocolo HTTP para hacer su uso accesible y rápido.