Configurar CORS en Laravel 5.2


Si has llegado ha esta entrada lo más probable es que tu navegador te este mostrando un error como este:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://misitio.com. This can be fixed by moving the resource to the same domain or enabling CORS.

¿Que es CORS (Cross-Origin Resource Sharing)?

La compartición de recursos de origen cruzado (CORS por sus siglas en Inglés) es una especificación del W3C que permite la comunicación entre distintos dominios en el navegador

Pongamos un ejemplo: tenemos un sitio A que requiere información de un sitio B (el caos más común es consumir un API). Al intentar llevarlo acabo recibiremos un error como el mencionado anteriormente. Esto se debe a la política del mismo origen del navegador. Aquí es donde entra CORS, con el que podemos especificar mediante encabezados en nuestro sitio B que A o cualquier otro sitio esta autorizado a realizar peticiones.

Configurando CORS en Laravel 5

La idea será utilizar un middleware que se encargará de añadir los encabezados correspondientes para el uso de CORS

Utilizaremos:

Como siempre los primero sera instalar este maravilloso paquete con composer:

composer require barryvdh/laravel-cors 

Posteriormente ejecutaremos el siguiente comando para crear nuestro archivo de configuración(config/cors.php):

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider" 

Nuestro archivo lucirá de la siguiente forma:

<?php 
return [ 
/* |-------------------------------------------------------------------------- | Laravel CORS |-------------------------------------------------------------------------- | | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*') | to accept any value. | */ 
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,
    'hosts' => [],
];

Por default esta configurado para aceptar peticiones de todos los orígenes (cualquier dominio), cualquier tipo de método (GET, POST, PUT y DELETE) y permitiendo los Headers (‘Content-Type’, ‘Accept’, etc.)

A continuación añadiremos la siguiente linea en el arreglo providers que se encuentra dentro del archivo config/app.php:

Barryvdh\Cors\ServiceProvider::class,

Uso

Existen varias formas de usarla, la más simple es añadir el middleware a nuestras rutas de la siguiente forma:

Route::group(['middleware' => 'cors'], function(Router $router){
    $router->get('api', 'ApiController@index');
});

Otra opción si queremos aplicar CORS en todas nuestras rutas de laravel es añadirlo como un middleware global. Para ello modificaremos nuestro array middleware en el archivo app/http/Kernel.php:

protected $middleware = [
    ....
    \Barryvdh\Cors\HandleCors::class
];

Y por último la opción que yo prefiero, agregarlo directamente en el constructor de nuestro controlador, quedando de la siguiente forma:


class MiControlador extends Controller{

	public function __construct() {
		...
		$this->middleware('cors');
	}
	...
}

 

Y listo, con eso tendremos configurado CORS y nuestro sitio A podrá hacer peticiones al sitio B sin problemas.

Si quieren más detalles acerca de CORS les dejo dos grandes artículos:

https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS

https://www.html5rocks.com/en/tutorials/cors/

 

{lang: 'es'}

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *