Habilitando CORS no IIS 10 – Rápido e Fácil

O cenário é esse: seu programa client-side está rodando no browser e, faz uma requisição a uma API que está em outro servidor e o programa tem sua execução interrompida com a mensagem:

Access to fetch at ‘(URI do endpoint)’ from origin ‘(URL da origem)’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Access to fetch at ‘(URI do endpoint)’ from origin ‘(URL da Origem)’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains the invalid value ‘(algum valor)’. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

GET (URI do endpoint) net::ERR_FAILED 200

Isso acontece porque a política de CORS – Cross Origin Resource Sharing – não permite requisições vindas de outros endereços que não seja o seu próprio.

A forma mais fácil e rápida de resolver este problema, é liberar todas as requisições ao seu servidor, não importando qual seja a origem. Isso pode representar um problema de segurança mas, caso seja suficiente para o seu caso, vou mostrar como configurar o IIS para se comportar dessa forma sem a necessidade de instalação de qualquer componente.

Caso você precise de mais segurança e realmente seja necessário fazer um controle granular de quem pode acessar sua API vou passar a explicação logo abaixo.

Liberando Tudo

1. No gerenciador do IIS selecione um site e então abra o item “HTTP Response Headers”.

2. Clique em “Add”

3. Preencha com os seguintes valores:
Name: Access-Control-Allow-Origin
Value: *
Atualizado:
Volte ao passo 2, “Add” e adicione outro registro com os seguintes valores:
Name: Access-Control-Allow-Headers
Value: *

4. Pronto. Agora seu servidor irá liberar todas as requisições. As aplicações que consomem seus serviços não mas receberão erro de bloqueio pela política de CORS.

5. Vá até o final deste artigo e poste um comentário me deixando saber que esta dica salvou o seu dia! 😉

Colocando o CORS Para Funcionar

Mas o CORS existe por um motivo e, certamente, em um ambiente de produção você irá querer tirar proveito deste recurso. O CORS habilitado impede que origens não reconhecidas façam uso da sua API. Caso a sua API seja de acesso público, então a dica dada anteriormente, para liberar todos os acessos já atende à sua necessidade, mas caso você queria controlar quem pode consumir sua API, segue os passos.

1. Por incrível que pareça, o módulo de CORS não faz parte do IIS por padrão e nem está nas opções de instalação deste recurso. Então, em primeiro lugar, no seu servidor que está rodando o IIS faça a download deste componente. Para isso, vá direto ao site oficial da Microsoft:
https://www.iis.net/downloads/microsoft/iis-cors-module

2. Uma vez instalado o módulo CORS no servidor, as definições devem ser passadas através do conteúdo do arquivo “web.config”. No exemplo abaixo eu mostro como liberar todas as requisições originadas pelos domínios “larsoft.com.br” e “lucianoreis.com”:

	<!-- CORS -->
	<system.webServer>
		<cors enabled="true">
			<add origin="https://*.larsoft.com.br">
				<allowHeaders allowAllRequestedHeaders="true" />
				<allowMethods>
					<add method="GET" />
					<add method="HEAD" />
					<add method="POST" />
					<add method="PUT" />
					<add method="DELETE" />
					<add method="CONNECT" />
					<add method="OPTIONS" />
					<add method="TRACE" />
					<add method="PATCH" />
				</allowMethods>
			</add>
			<add origin="https://*.lucianoreis.com">
				<allowHeaders allowAllRequestedHeaders="true" />
				<allowMethods>
					<add method="GET" />
					<add method="HEAD" />
					<add method="POST" />
					<add method="PUT" />
					<add method="DELETE" />
					<add method="CONNECT" />
					<add method="OPTIONS" />
					<add method="TRACE" />
					<add method="PATCH" />
				</allowMethods>
			</add>
		</cors>
	</system.webServer>
  <!-- Fim do CORS -->

Obviamente não é necessário adicionar tantos métodos para cada origem, eu o fiz apenas por fins didáticos. Normalmente são habilitados apenas GET, HEAD, POST, PUT e DELETE.

3. Pronto, com isso seu site vai liberar acesso exclusivamente para as origens determinadas. Me dica ali nos comentários se essa dica foi útil para você.

Para mais informações sobre CORS no IIS, acesse diretamente o site da Microsoft em:

CORS Module Configuration Reference

This article provides an overview of the IIS CORS module and explains the configuration of the module.