Header Ads Widget

Ticker

6/recent/ticker-posts

Manejo de CORS en Express

CORS significa Intercambio de recursos de origen cruzado y permite que los navegadores web modernos puedan enviar solicitudes AJAX y recibir respuestas HTTP para recursos de otros dominios distintos del dominio que sirve a la aplicación del lado del cliente.

Si alguna vez ha estado desarrollando una aplicación que realiza solicitudes XHR a un origen de dominio cruzado y obtiene un error como el siguiente en la consola de su navegador?

XMLHttpRequest no se puede cargar. No hay ningún encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por tanto, no se permite el acceso al origen. La respuesta tenía el código de estado HTTP 500.

Su navegador web simplemente le informa que su servidor web no está devolviendo los encabezados que permiten CORS ie Access-Control-Allow-OriginyAccess-Control-Allow-Methods

Entonces, en este tutorial, aprenderá cómo habilitar CORS en su servidor Express 4 para permitir que su aplicación de front-end evite la Política de Mismo Origen impuesta por los navegadores web modernos. Esto es particularmente útil cuando está desarrollando su aplicación localmente, ya que en muchos casos tendrá dos servidores de desarrollo en ejecución (servidores front-end y back-end) en diferentes puertos, o si desea habilitar el uso compartido de recursos entre diferentes dominios / Hospedadores.

Cómo habilitar CORS en Express 4

Hay muchas formas que puede utilizar para habilitar CORS en Express.

Si está desarrollando localmente su aplicación y desea una forma rápida de CORS, simplemente puede usar un middleware con algunas líneas de código:

var express = require('express');
var server = express();

server.use(bodyParser.urlencoded({extended: true}))
server.use(bodyParser.json())


server.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

server.get('/endpoint', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

server.listen(3000, () => {
  console.log('Listenning at http://localhost:3000' )
})

El comodín *permite acceder a los recursos desde cualquier origen.

Eso es todo, ahora puede enviar solicitudes desde cualquier origen sin tener los mismos problemas de política de origen.

También puede usar opciones detalladas sin tener que lidiar con nombres de encabezados HTTP para CORS usando el módulo CORS instalado desde npm .

Usando el módulo CORS

Dirígete a tu terminal e instala:

npm install --save cors

Luego puede usarlo como middleware

var express = require('express');
var server = express();
var cors = require('cors');

server.use(bodyParser.urlencoded({extended: true}))
server.use(bodyParser.json())

server.get('/endpoint', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

server.use(cors());

server.listen(3000, () => {
  console.log('Listenning at http://localhost:3000' )
})

Esto es equivalente a nuestro ejemplo anterior y permite acceder a los recursos desde cualquier origen agregando el Access-Control-Allow-Origin: *encabezado a todas las solicitudes.

Control de hosts permitidos

Cuando está en producción, no desea permitir el acceso CORS para todos los orígenes, pero si necesita permitir solicitudes de origen cruzado de algunos hosts especificados, puede agregar el siguiente código:

server.use(cors({
  origin: 'https://techiediaries.com'
}));

Esto permitirá https://techiediaries.comenviar solicitudes de origen cruzado a su servidor Express sin que se interponga la Política de mismo origen.

También puede habilitar CORS para una sola ruta Express

server.get('/endpoint', cors(), function (req, res, next) {
  res.json({msg: 'This has CORS-enabled for only this route: /endpoint'})
})

Permitir orígenes dinámicos / múltiples

Si desea permitir múltiples orígenes, debe usar una función (para el origen en lugar de una cadena) que establezca dinámicamente el encabezado CORS según el origen que realiza la solicitud y una lista blanca que especifique que contiene el origen para permitir.

var express = require('express')
var cors = require('cors')
var server = express()

var whitelist = ['//techiediaries.com', 'http://othersite.com']

var options = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

server.use(cors(options))

server.get('endpoint', function (req, res, next) {
  res.json({msg: 'This has CORS enabled'})
})

server.listen(3000, () => {
  console.log('Listenning at http://localhost:3000' )
})

Conclusión

En este tutorial, hemos visto algunas opciones útiles para agregar encabezados CORS a su aplicación web, desarrolladas con Node.js y Express 4, que es particularmente útil para aplicaciones de desarrollo con aplicaciones front-end y back-end separadas o si desea ser capaz de compartir recursos (a través de solicitudes de API) en muchos dominios.

Publicar un comentario

0 Comentarios