Algunas páginas web cargan recursos como imágenes u hojas de estilos desde dominios separados. Sin embargo, por motivos de seguridad, los navegadores limitan las peticiones AJAX a otro dominio diferente al suyo. Por ejemplo, una aplicación que usa XMLHttpRequest sólo puede enviar peticiones HTTP a su propio dominio. Es necesario tener en cuenta que se considera que dos solicitudes tienen el mismo origen si tienen el mismo esquema, host y número de puerto. Si alguno de estos tres es diferente, se entiende que las peticiones son de origen cruzado, es decir, que no pertenecen a orígenes idénticos.

De este modo, para acceder a recursos seleccionados desde un servidor en un origen distinto al que pertenece, se usa CORS (Cross-Origin Resource Sharing). Esta tecnología define un modelo para poder acceder a recursos de diferentes dominios y así, tanto el cliente como el servidor, trabajan “de la mano” utilizando encabezados HTTP.

Para ver más claro en que consiste esta tecnología, voy a realizar una aplicación en la que podremos visualizar cómo podemos incluir CORS en nuestro servidor.

Para ello, tendremos dos tipos de proyectos, el primero será un Web Api que nos devolverá un dato al azar.

Y el segundo proyecto será de tipo MVC y estará alojado en otro dominio.  Será el encargado de llamar al API y mostrar los datos en pantalla.

Abrimos Visual Studio y nos creamos un nuevo proyecto Web llamado WebApiCors.

foto2

Ahora que ya tengo creado el proyecto, pincho sobre la carpeta Models y creo una nueva clase llamada Jeans.

foto4

A continuación, añadimos un nuevo controlador llamado JeansController, que será de tipo Web API Empty.

En dicho controlador, voy a incluir dos métodos. Uno, para obtener un conjunto de jeans y el segundo, para recuperar un único jean. Cargaré una colección al inicio con todos los jeans que quiero exponer en el servicio.

Primero, la lista de jeans.

foto22

Y así con todos los vaqueros que quieras que se visualicen en tu lista.

Ahora, los dos métodos.

foto23

Al ejecutar la aplicación, es necesario ir a nuestra URL api del controlador para comprobar que todo funciona correctamente:

http://localhost:54089/api/Jeans —>  Jeans es el nombre del controlador

foto7

Ahora que sé que todo funciona, voy a externalizar la llamada, es decir, no llamaré al servicio desde el mismo dominio. Para ello, voy a crear el segundo proyecto llamado WebMvcCors de tipo MVC.

Para poder usar la parte visible del otro proyecto, WebApiCors, voy a crear una vista en nuestro dominio que permitirá visualizar todos los jeans o buscar un jean en concreto.

De este modo, en el proyecto WebMvcCors y sobre la carpeta Views, crearé una nueva carpeta llamada Almacen. Y dentro de esta carpeta, incluiré una nueva vista llamada Index.

Ahora, sobrescribiré la zona scripts para poder llamar al servicio API. Dentro los scripts, crearé una página que me permitirá mostrar todos los jeans al inicio de la aplicación.
Untitled
Untitled2
Untitled3

Acto seguido, crearé un controlador vacío sobre la carpeta Controllers, llamado AlmacenController. Y dejó el código que viene por defecto sin tocar nada.

Para ejecutar la aplicación y ver su funcionamiento, es necesario cambiar la URL de la función de la vista Index.  Antes hacía la petición al mismo servidor y ahora hay que hacer una llamada absoluta a otro servidor. De este modo, voy a arrancar el proyecto WebApiCors y copiaré la URL. Esta URL, la tengo que copiar en la función cargarJeans() de la vista Index del proyecto WebMvcCors.

function cargarJeans() {
$.ajax({
url: “http://localhost:54089/api/Jeans”,
type: “GET”,

Al ejecutar la vista Index del proyecto WebMvcCors, nos damos cuenta de que la aplicación no muestra los jeans. Al pulsar F12, se puede comprobar que el error que muestra tiene que ver con XHR.

foto13

Esto significa que no hay acceso al API desde cliente, ya que, como he explicado anteriormente, por motivos de seguridad se impide.  Para dejar acceso al API, se debe realizar en la configuración del proyecto que ofrece los datos. De este modo, en el proyecto WebApiCors, es necesario agregar los paquetes NuGet que permiten configurar las clases para el acceso CORS.

foto15
foto16

Es necesario avisar al iniciar la aplicación que usará CORS. Para ello, hay que escribir en el Global.asax.

foto126

Ahora sí, para probarlo primero arranco el proyecto API. Después desde la vista Index del proyecto Mvc, pulso F5 y ya está, mi aplicación Mvc es capaz de obtener los recursos de mi API.
Untitled23