¿Cómo habilitar Cors en la API web de asp.net?

¿Alguna vez te has encontrado con el siguiente error?

Solicitud de origen cruzado bloqueada. La misma política de origen no permite la lectura del recurso

1. Scheme (HTTP)
2. Host (server)
3. Port (8888)

El origen consta del esquema, el host y el número de puerto.

Si dos recursos tienen la misma combinación de scheme, host y port, se consideran del mismo origen, o del origen cruzado.  Consideremos los siguientes dos URI

http://abc.com:80 y http://xyz.com:8080 no son del mismo origen, ya que su host y puerto no son lo mismo. Por motivos de seguridad, es posible que se restrinja el uso compartido de recursos entre estas dos direcciones URL. Intentemos entender CORS con el ejemplo de XMLHttpRequest. Usamos XMLHttpRequest para realizar la operación HTTP en el servidor desde el documento HTML. Hay dos direcciones URL que se usan en XMLHttpRequest:

1. URL solicitada o URL del servidor
2. URL del documento que inició la solicitud

Si ambas direcciones URL tienen el mismo esquema, host y puerto, el objeto XMLHttpRequest realizará la operación, de lo contrario, bloqueará la operación HTTP por razones de seguridad.

Tanto el servidor como el navegador deben contar con el soporte del CORS. De forma predeterminada, todos los navegadores recientes son compatibles con CORS, pero como desarrolladores de API, debemos habilitar la compatibilidad con CORS en la API web.

CORS in ASP.NET Web API

Aquí hemos creado una API web de ASP.NET muy simple que devuelve una matriz de clases como se muestra en la imagen a continuación:

Como puede ver, la API web se ejecuta en el puerto 8458.  A continuación, estamos tratando de obtener los datos en una aplicación JavaScript que se ejecuta en el URI con el puerto 5901:

En el documento HTML, estamos usando un objeto XMLHttpRequest para realizar la llamada HTTP. Como es evidente que el URI de la API web (URI del recurso solicitado) y el documento HTML (URL desde el que se originó la solicitud) no son iguales, por lo tanto, el objeto XMLHttpRequest está bloqueando el uso compartido de recursos, ya que no son del mismo origen. Muy probablemente en el navegador obtendremos la excepción como se muestra en la imagen a continuación:

Profundicemos más en el error. En el navegador, abra la herramienta para desarrolladores y la pestaña de red. Encontrará Origin y Host en el encabezado de la solicitud como se muestra en la imagen a continuación. Está claro que ambos no son lo mismo, y CORS no está permitido por el agente de usuario XMLHttpRequest.

Si observa el encabezado de respuesta, no habría información sobre Access-Control-Allow-Origin.

Dado que el servidor no envía una respuesta sobre qué origen puede acceder al recurso en el encabezado, el objeto XMLHttpRequest bloquea el uso compartido de recursos en el explorador.  Sigamos adelante y habilitemos la compatibilidad de CORS con la API web.

Enabling CORS in ASP.NET Web API

Para habilitar CORS en ASP.NET Web API 2.0, primero debe agregar el paquete Microsoft.AspNet.WebApi.Cors al proyecto. Puede elegir el símbolo del sistema para instalar el paquete o el administrador de NuGet para buscar e instalar, como se muestra en la imagen siguiente:

Puede configurar la compatibilidad de CORS con la API web en tres niveles:

1. A nivel global
2. En el nivel de controlador
3. A nivel de acción

Para configurar la compatibilidad con CORS a nivel global, primero instale el paquete CORS y, a continuación, abra WebApiConfig.cs archivo desde App_Start carpeta.

var cors = new EnableCorsAttribute("http://localhost:5901", "*", "*");
config.EnableCors(cors);

Después de habilitar CORS en el nivel global, vuelva a alojar la API web y examine el encabezado de solicitud y respuesta. Además, observe que en el atributo Enable CORS hemos establecido la URL de origen en la URL de la aplicación JavaScript.

El servidor de API web agrega un encabezado adicional Access-Control-Allow-Origin en el encabezado de respuesta, como se muestra en la imagen siguiente. La dirección URL del encabezado Access-Control-Allow-Origin en el encabezado de respuesta y la dirección URL del encabezado Origin en el encabezado de solicitud deben ser las mismas, por lo tanto, solo XMLHttpRequest permitirá las operaciones de CORS. En algunos casos, el valor del encabezado de respuesta Access-Control-Allow-Origin se establecerá en un carácter comodín*. Esto significa que el servidor permite la compatibilidad con CORS para todos los orígenes en lugar de un origen en particular.

Hemos habilitado el soporte CORS en el servidor, por lo que no deberíamos obtener la excepción y los datos deben obtenerse en el navegador.

Como hemos comentado anteriormente, en la API web de ASP.NET, la compatibilidad con CORS se puede habilitar en tres niveles diferentes:

1. A nivel de acción
2. En el nivel de controlador
3. A nivel global

Habilitación de CORS en el nivel de acción

La compatibilidad con CORS se puede habilitar en el nivel de acción, como se muestra en la lista a continuación:

[EnableCors(origins: "http://localhost:5901", headers: "*", methods: "*")]
public HttpResponseMessage GetItem(int id)
{
   // Code here
}

En la lista de código anterior, hemos habilitado CORS para la acción GetItem. Además, estamos configurando parámetros para permitir todos los encabezados y admitir todos los métodos HTTP estableciendo el valor en star.

Habilitación de CORS en el nivel de controlador

La compatibilidad con CORS se puede habilitar en el nivel del controlador, como se muestra en la lista a continuación:

[EnableCors(origins: "http://localhost:5901", headers: "*", methods: "*")]
public class ClassesController : ApiController {}

En la lista de código anterior, hemos habilitado CORS para el controlador de clases. También estamos configurando parámetros para permitir todos los encabezados y admitir todos los métodos HTTP estableciendo el valor en star. Podemos excluir una de las acciones de la compatibilidad con CORS mediante el atributo [DisableCors].

Habilitación de CORS a nivel global

Para configurar la compatibilidad con CORS a nivel global, primero instale el paquete CORS y, a continuación, abra el archivo WebApiConfig.cs desde App_Start carpeta.

var cors = new EnableCorsAttribute("http://localhost:5901", "*", "*");
config.EnableCors(cors);

Si establece el atributo en más de un ámbito, el orden de prioridad es el siguiente:

Atributos de EnableCors

1.Orígenes       : Puede establecer más de un valor de orígenes separados por comas.  Si desea que cualquier origen realice una solicitud AJAX a la API, establezca el valor de origen en el valor comodín star.

2.Encabezados       de solicitud: el parámetro Encabezado de solicitud especifica qué encabezados de solicitud están permitidos. Para permitir que cualquier valor de conjunto de encabezado sea *

3.Métodos       HTTP: El parámetro methods especifica qué métodos HTTP pueden acceder al recurso. Para permitir todos los métodos, utilice el valor comodín "*". De lo contrario, establezca el nombre del método separado por comas para permitir que el conjunto de métodos acceda a los recursos.

Juntando todo eso, puede habilitar CORS para dos orígenes, para todos los encabezados, y luego publicar y obtener operaciones como se muestra en la lista a continuación:

[EnableCors(origins: "http://localhost:5901,http://localhost:8768", headers: "*", methods: "post,get")]
public class ClassesController : ApiController {}

Opcionalmente, también puede pasar credenciales a la API web y crear una política personalizada, pero espero que haya encontrado esta publicación sobre los conceptos básicos de CORS en la API web de ASP.NET. ¿Tienes algo que añadir? ¡Comparte tus comentarios a continuación!