Entender e resolver problemas de CORS (compartilhamento de recursos entre origens) do proxy de aplicativo do Microsoft Entra
O compartilhamento de recursos entre origens (CORS) pode apresentar desafios para os aplicativos e as APIs que você publica por meio do proxy de aplicativo do Microsoft Entra. Esse artigo discute problemas e soluções de CORS do proxy de aplicativo do Microsoft Entra.
Dica
O JavaScript assíncrono e a linguagem de marcação eXtemsible são conhecidos como (AJAX). O AJAX contém um acrônimo dentro de um acrônimo na linguagem XML (EXtensible Markup Language) que compõe a última X no AJAX. AJAX significa JavaScript assíncrono e XML, e XML significa linguagem de marcação eXtensible.
A segurança do navegador geralmente impede que uma página da Web faça solicitações AJAX para outro domínio. Essa restrição se chama política da mesma origem e impede que um site mal-intencionado leia dados confidenciais de outro site. No entanto, às vezes, talvez seja interessante permitir que outros sites chamem sua API Web. O CORS é um padrão W3C que permite que um servidor afrouxe a política de mesma origem e permita algumas solicitações entre origens enquanto rejeita outras.
Entender e identificar problemas de CORS
Duas URLs têm a mesma origem se têm esquemas, hosts e portas idênticos (Solicitação para Comentários [RFC] 6454), como:
http://contoso.com/foo.htmlhttp://contoso.com/bar.html
Essas URLs têm origens diferentes das duas anteriores:
http://contoso.net- Domínio diferentehttp://contoso.com:9000/foo.html- Porta diferentehttps://contoso.com/foo.html- Esquema diferentehttp://www.contoso.com/foo.html- Subdomínio diferente
A política de mesma origem impede que os aplicativos acessem recursos de outras origens, a menos que usem os cabeçalhos de controle de acesso corretos. Se os cabeçalhos de CORS estiverem ausentes ou incorretos, as solicitações entre origens falharão.
Você pode identificar problemas de CORS usando as ferramentas de depuração do navegador:
- Inicie o navegador e navegue até o aplicativo Web.
- Pressione F12 para abrir o console de depuração.
- Tente reproduzir a transação e examine a mensagem do console. Uma violação de CORS produz um erro de console sobre a origem.
Na captura de tela a seguir, a seleção do botão Experimentar causou uma mensagem de erro de CORS que informava que https://corswebclient-contoso.msappproxy.net não foi encontrada no cabeçalho Access-Control-Allow-Origin.
Desafios de CORS com o proxy de aplicativo
O exemplo a seguir mostra um cenário típico de CORS do proxy de aplicativo do Microsoft Entra. O servidor interno hospeda um controlador da API Web CORSWebService e um CORSWebClient que chama CORSWebService. Há uma solicitação AJAX (JavaScript e XML assíncronos) de CORSWebClient para CORSWebService.
O aplicativo CORSWebClient funciona quando você o hospeda no local, mas apresenta falha no carregamento ou causa erros quando publicado por meio do proxy de aplicativo do Microsoft Entra. Se você publicou os aplicativos CORSWebClient e CORSWebService separadamente como aplicativos diferentes por meio do proxy de aplicativo, os dois aplicativos são hospedados em domínios diferentes. Uma solicitação AJAX de CORSWebClient para CORSWebService é uma solicitação entre origens e falha.
Soluções para problemas de CORS do proxy de aplicativo
Você pode resolver o problema de CORS anterior de qualquer uma das várias maneiras.
Opção 1: configurar um domínio personalizado
Use um domínio personalizado do proxy de aplicativo do Microsoft Entra para publicar da mesma origem, sem precisar fazer nenhuma alteração nas origens, no código ou nos cabeçalhos do aplicativo.
Opção 2: publicar o diretório pai
Publique o diretório pai de ambos os aplicativos. Essa solução funcionará especialmente bem se você tiver apenas dois aplicativos no servidor Web. Em vez de publicar cada aplicativo separadamente, você pode publicar o diretório pai comum, o que resulta na mesma origem.
Os exemplos mostram as páginas de proxy de aplicativo do Microsoft Entra para o aplicativo CORSWebClient. Quando a URL Interna é definida como contoso.com/CORSWebClient, o aplicativo não pode fazer solicitações bem-sucedidas para o diretório contoso.com/CORSWebService, porque elas são de origem cruzada.
Em vez disso, defina a URL Interna para publicar o diretório pai, que inclui os diretórios CORSWebClient e CORSWebService:
As URLs do aplicativo resultantes resolvem efetivamente o problema de CORS:
https://corswebclient-contoso.msappproxy.net/CORSWebServicehttps://corswebclient-contoso.msappproxy.net/CORSWebClient
Opção 3: atualizar cabeçalhos HTTP
Para corresponder à solicitação de origem, adicione um cabeçalho de resposta HTTP personalizado no serviço Web. Para sites em execução no IIS (Serviços de Informações da Internet), use o Gerenciador do IIS para modificar o cabeçalho.
A modificação não requer nenhuma alteração de código. Você pode verificá-lo em um rastreamento do Fiddler.
**Post the Header Addition**\
HTTP/1.1 200 OK\
Cache-Control: no-cache\
Pragma: no-cache\
Content-Type: text/plain; charset=utf-8\
Expires: -1\
Vary: Accept-Encoding\
Server: Microsoft-IIS/8.5 Microsoft-HTTPAPI/2.0\
**Access-Control-Allow-Origin: https://corswebclient-contoso.msappproxy.net**\
X-AspNet-Version: 4.0.30319\
X-Powered-By: ASP.NET\
Content-Length: 17
Opção 4: modificar o aplicativo
Você pode alterar seu aplicativo para dar suporte a CORS adicionando o cabeçalho Access-Control-Allow-Origin, com os valores apropriados. A maneira de adicionar o cabeçalho depende da linguagem de código do aplicativo. Alterar o código requer mais esforço.
Opção 5: estender o tempo de vida do token de acesso
Alguns problemas de CORS não podem ser resolvidos. Por exemplo, seu aplicativo redireciona para login.microsoftonline.com para autenticação, e o token de acesso expira. A chamada CORS falhará. Uma solução alternativa para esse cenário é estender o tempo de vida do token de acesso para impedir que ele expire durante a sessão de um usuário. Para obter mais informações, consulte Tempos de vida de token configuráveis no Microsoft Entra ID.