CORS, también conocido como Intercambio de recursos de origen cruzado, debe estar habilitado si desea realizar una solicitud entre su cliente y el servidor cuando se encuentran en URL diferentes.
Consideremos que el cliente está en http://localhost:5500 y el servidor en http://localhost:5000 . Ahora, si intenta realizar una solicitud de su cliente al servidor, obtendrá el error que indica que está bloqueado por la política CORS.
¿Cómo habilitar CORS?
Usaremos cors, un paquete de node.js para habilitar CORS en Express Node.js Project.
Configuración del proyecto e instalación del módulo:
-
Paso 1: Cree una aplicación Node.js y asígnele el nombre gfg-cors usando el siguiente comando.
mkdir gfg-cors && cd gfg-cors npm init
- Paso 2: instale los módulos de dependencia con el siguiente comando.
npm i express cors
-
Paso 3: Cree el directorio del cliente y el archivo server.js en el directorio raíz. Luego cree index.html y script.js en el directorio del cliente .
Directorio de proyectos: Se verá así.
Ejemplo: Escriba el siguiente código en los archivos index.html, script.js y server.js .
index.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>gfg-cors</title> <script src="script.js"></script> </head> <body> </body> </html>
script.js
fetch('http://localhost:5000/gfg-articles')
.then((res) => res.json())
.then((gfg_articles) => console.log(gfg_articles));
server.js
// Requiring module
const express = require('express');
const cors = require('cors');
// Creating express app object
const app = express();
// CORS is enabled for all origins
app.use(cors());
// Example api
app.get('/gfg-articles',
(req, res) => res.json('gfg-articles'));
// Port Number
const port = 5000;
// Server setup
app.listen(port, () => `Server running on port ${port}`);
Nota: Si desea permitir que los orígenes seleccionados accedan a su sitio, debe configurar cors como se muestra a continuación.
server.js
// Requiring module
const express = require('express');
const cors = require('cors');
// Creating express app object
const app = express();
// CORS is enabled for the selected origins
let corsOptions = {
origin: [ 'http://localhost:5500', 'http://localhost:3000' ]
};
// Using cors as a middleware
app.get('/gfg-articles',cors(corsOptions),
(req,res) => res.json('gfg-articles'))
// Port number
const port = 5000;
// Server setup
app.listen(port, () => `Server running on port ${port}`);
Si solo desea permitir que un origen en particular acceda a su sitio, entonces corsOptions será el siguiente:
let corsOptions = {
origin: 'http://localhost:5500'
};
Paso para ejecutar la aplicación: Ejecute server.js usando el siguiente comando.
node server.js
Salida: abra index.html y luego verifique la siguiente salida en la consola.
Publicación traducida automáticamente
Artículo escrito por divyanshuparwal2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA