La palabra CORS significa «intercambio de recursos de origen cruzado» . El intercambio de recursos de origen cruzado es un mecanismo basado en encabezado HTTP implementado por el navegador que permite que un servidor o una API (interfaz de programación de aplicaciones) indique cualquier origen (diferente en términos de protocolo, nombre de host o puerto) que no sea su origen desde el cual el origen desconocido obtiene permiso para acceder y cargar recursos. El paquete cors disponible en el registro npm se usa para abordar errores CORS en una aplicación Node.js.
Entendamos usando un ejemplo.
Paso 1: Instalación
Como el paquete CORS está disponible en npm (administrador de paquetes de Nodes), ese paquete de terceros de Node.js, debemos tener Node.js instalado en nuestro sistema local. Para verificar escriba el siguiente comando en la terminal.
node -v
El comando mostrará la versión de Node.js instalada en su sistema. Si da algún error, haz que instales Node.js correctamente, para eso sigue este enlace .
Paso 2: Configuración del proyecto y estructura de carpetas. Primero, cree una carpeta en su sistema llamada «geeksforgeeks» y muévase a la carpeta usando un símbolo del sistema. Use el siguiente comando para hacerlo.
mkdir geeksforgeeks && cd geeksforgeeks
Dentro de esa carpeta, cree dos carpetas separadas: cliente y servidor ( usando el mismo comando mkdir ). Dentro del cliente , la carpeta crea archivos index.html y script.js . Dentro de la carpeta del servidor, escriba el siguiente comando para generar el archivo package.json:
npm init
Ahora, cree un archivo index.js dentro de la carpeta del servidor para escribir la lógica del lado del servidor. Nuestra estructura de carpetas actual debería verse así.
Estructura del proyecto: Tendrá el siguiente aspecto.
Paso 3: ahora dentro del mismo directorio, instale los paquetes necesarios (express y cors) usando el siguiente comando:
npm install express cors
Paso 4: Este es el código dentro del archivo index.html . Este es el código HTML principal que se mostrará al cliente en el navegador.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample webpage</title> <script src="script.js"></script> </head> <body></body> </html> <!-- Frontend will be running on port 5500. -->
Estamos permitiendo requests de algunos orígenes particulares utilizando el objeto corsOptions .
let corsOptions = {
origin : ['http://localhost:5500'],
}
# this corsOptions object enables CORS action for all origins running on port 5500 only.
# So if an application is running on any port other than 5000(own origin) and 5500,
no CORS action will be enabled.
Producción:
Publicación traducida automáticamente
Artículo escrito por shinjanpatra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA