Como habilitar o Cors na API da Web do asp.net?

Você já se deparou com o seguinte erro:

Solicitação de origem cruzada bloqueada. A mesma política de origem não permite a leitura do recurso

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

A Origem consiste no Esquema, Host e o número da porta.

Se dois recursos tiverem a mesma combinação de esquema, host e porta, eles serão considerados da mesma origem, caso contrário, da origem cruzada.  Vamos considerar os dois URI a seguir

http://abc.com:80 e http://xyz.com:8080 não são da mesma origem, pois seu hospedeiro e porta não são os mesmos. Por motivos de segurança, o compartilhamento de recursos entre essas duas URLs pode ser restrito. Vamos tentar entender o CORS com o exemplo de XMLHttpRequest. Usamos o XMLHttpRequest para executar a operação HTTP no servidor a partir do documento HTML. Há duas URLs usadas no XMLHttpRequest:

1. URL solicitada ou URL do servidor
2. URL do documento que iniciou a solicitação

Se ambas as URLs tiverem o mesmo esquema, host e porta, o objeto XMLHttpRequest executará a operação, caso contrário, bloqueará a operação HTTP por motivos de segurança.

Tanto o servidor quanto o navegador devem ter o suporte do CORS. Por padrão, todos os navegadores recentes têm suporte a CORS, mas, como desenvolvedor de API, precisamos habilitar o suporte a CORS na API Web.

CORS in ASP.NET Web API

Aqui, criamos uma API Web ASP.NET muito simples que retorna uma matriz de classes, conforme mostrado na imagem abaixo:

Como você pode ver, a API Web está em execução na porta 8458.  Em seguida, estamos tentando obter os dados em um aplicativo JavaScript que está sendo executado no URI com a porta 5901:

No documento HTML, estamos usando um objeto XMLHttpRequest para fazer a chamada HTTP. Como é evidente que o URI da API Web (URI do recurso solicitado) e o documento HTML (URL do qual a solicitação se originou) não são os mesmos, o objeto XMLHttpRequest está bloqueando o compartilhamento de recursos, pois não são da mesma origem. Muito provavelmente no navegador obteremos a exceção conforme mostrado na imagem abaixo:

Vamos nos aprofundar no bug. No navegador, abra a ferramenta do desenvolvedor e a guia rede. Você encontrará Origin e Host em Request Header, conforme mostrado na imagem abaixo. É claro que ambos não são iguais e o CORS não é permitido pelo agente do usuário XMLHttpRequest.

Se você olhar para o cabeçalho de resposta, não haverá informações sobre Access-Control-Allow-Origin.

Como o servidor não envia uma resposta sobre qual origem pode acessar o recurso no cabeçalho, o objeto XMLHttpRequest bloqueia o compartilhamento de recursos no navegador.  Vamos em frente e habilitar o suporte CORS para a API Web.

Enabling CORS in ASP.NET Web API

Para habilitar o CORS na API Web 2.0 ASP.NET, primeiro você precisa adicionar o pacote Microsoft.AspNet.WebApi.Cors ao projeto. Você pode escolher o prompt de comando para instalar o pacote ou o gerenciador NuGet para pesquisar e instalar, conforme mostrado na imagem abaixo:

Você pode configurar o suporte ao CORS para a API Web em três níveis:

1. A nível global
2. No nível do controlador
3. No nível de ação

Para configurar o suporte ao CORS no nível global, primeiro instale o pacote CORS e abra WebApiConfig.cs arquivo App_Start pasta.

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

Depois de habilitar o CORS no nível global, hospede novamente a API Web e examine o cabeçalho de solicitação e resposta. Além disso, observe que, no atributo Enable CORS, definimos o URL de origem como o URL do aplicativo JavaScript.

O servidor de API Web está adicionando um cabeçalho extra Access-Control-Allow-Origin no cabeçalho de resposta, conforme mostrado na imagem abaixo. A URL no cabeçalho Access-Control-Allow-Origin no cabeçalho de resposta e a URL no cabeçalho Origin no cabeçalho da solicitação devem ser as mesmas, então somente XMLHttpRequest permitirá as operações CORS. Em alguns casos, o valor do cabeçalho de resposta Access-Control-Allow-Origin será definido como um caractere curinga*. Isso significa que o servidor permite suporte a CORS para todas as origens em vez de uma origem específica.

Habilitamos o suporte a CORS no servidor, portanto, não devemos obter a exceção e os dados devem ser buscados no navegador.

Como discutimos anteriormente, na API Web do ASP.NET, o suporte ao CORS pode ser habilitado em três níveis diferentes:

1. No nível de ação
2. No nível do controlador
3. A nível global

Habilitar o CORS no nível da ação

O suporte a CORS pode ser habilitado no nível de ação, conforme mostrado na listagem abaixo:

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

Na listagem de código acima, habilitamos o CORS para a ação GetItem. Além disso, estamos definindo parâmetros para permitir todos os cabeçalhos e oferecer suporte a todos os métodos HTTP, definindo o valor como estrela.

Habilitar o CORS no nível do controlador

O suporte a CORS pode ser habilitado no nível do controlador, conforme mostrado na listagem abaixo:

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

Na listagem de código acima, habilitamos o CORS para o Controlador de Classes. Também estamos definindo parâmetros para permitir todos os cabeçalhos e oferecer suporte a todos os métodos HTTP, definindo o valor como estrela. Podemos excluir uma das ações do suporte ao CORS usando o atributo [DisableCors].

Habilite o CORS em nível global

Para configurar o suporte ao CORS no nível global, primeiro instale o pacote CORS e, em seguida, abra o arquivo WebApiConfig.cs​ ​App_Start partir de pasta.

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

Se você definir o atributo em mais de um escopo, a ordem de precedência será a seguinte:

Atributos de EnableCors

1.Origens       : Você pode definir mais de um valor de origem separado por vírgulas.  Se você quiser que qualquer origem faça uma solicitação AJAX para a API, defina o valor da origem como o valor curinga star.

2.Cabeçalhos       de solicitação: O parâmetro de cabeçalho de solicitação especifica quais cabeçalhos de solicitação são permitidos. Para permitir qualquer cabeçalho, defina o valor como *

3.Métodos       HTTP: O parâmetro methods especifica quais métodos HTTP têm permissão para acessar o recurso. Para permitir todos os métodos, use o valor curinga "*". Caso contrário, defina o nome do método separado por vírgulas para permitir que o conjunto de métodos acesse os recursos.

Juntando tudo isso, você pode habilitar o CORS para duas origens, para todos os cabeçalhos e, em seguida, postar e obter operações, conforme mostrado na listagem abaixo:

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

Opcionalmente, você também pode passar credenciais para a API Web e criar uma política personalizada, mas espero que você tenha encontrado este post sobre os conceitos básicos do CORS na API Web ASP.NET. Tem algo a acrescentar? Compartilhe seus comentários abaixo!