Plugin do Chrome: Resolvendo o CORS em desenvolvimento

Recentemente passei por uma situação em que precisava testar uma API de produção em uma SPA que estava desenvolvendo no meu localhost, esta API de produção estava configurada com os parâmetros de CORS de produção e só habilitava o uso dela em alguns domínios de produção. Neste momento não queria também configurar minha API para ser consumida em meu localhost. Felizmente o Breno Marcomini do meu time, me sugeriu um plugin do Chrome que intercepta a requisição feita para minha API e força ela a liberar o CORS em menu navegador.

CORS

O CORS (Cross-origin Resource Sharing) é um mecanismo de segurança e uma padrão W3C que diz para o navegador do cliente que uma API ou recurso pode ser acessado de um domínio diferente do site que esteja consumindo ela, exemplo:

• site https://www.meusite.com.br
• api https://api.minhaapi.com.br

Este mecanismo é feito através de alguns header na resposta da API configurada para explicitar por qual website e quais métodos poderão ser consumidos:

Access-Control-Allow-Origin: https://www.meusite.com.br
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 86400

Plugin

Para eu não precisar neste momento configurar minha API para ser consumida pelo meu localhost, eu segui a sugestão e utilizei o seguinte plugin

Allow CORS: Access-Control-Allow-Origin

Este plugin intercepta a requisição de minha API e configura os headers que eu precisaria para utilizar em meu website que esta rodando no localhost.

Uma vez que ele esteja instalado eu preciso habilitar ele no Chrome

E pronto, já posso continuar meu desenvolvimento 🚀🚀🚀

Espero que esta dica seja útil, em breve postarei como configurar corretamente o CORS utilizando .NET Core.

Estou a disposição para duvida, criticas e sugestões.

abs

Rodolfo