« Voltar
em Web API c# asp.net core cors

Habilitando Cross Origin Resource Sharing (CORS) na sua web API com .NET Core.

Semana passada eu estava estudando fazendo uma API com ASP.NET Core e consumindo ela em uma SPA simples feita com Vue.js.

Enquanto eu estava fazendo as requisições apenas para minha API (que tava rodando localmente em modo debug) tava tudo bem:

let promise = this.$http.get('https://localhost:9394/api/movie');
promise.then(res => res.json()).then(movies => this.movies = movies, err => console.log(err));

Esse código simplesmente pegava uma lista do meu próprio serviço e devolvia ela e eu mostrava na aplicação, simples.

Aí fiz um deploy do meu serviço pra Azure, troquei o endereço e fui testar:

let promise = this.$http.get('http://gabs-api.azurewebsites.net');
promise.then(res => res.json()).then(movies => this.movies = movies, err => console.log(err));

Não rolou.

Achei estranho e abri o console do navegador pra ver o que tava acontecendo e vi esse erro aqui:

*Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:9394/api/movie. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). *

Mas calma...o que tá acontecendo aqui?

Same origin policy

Tem uma parada chamada Same Origin Policy, que é basicamente um procedimento de segurança que os navegadores têm pra impedir que seu site faça requisições pra outros domínios.

Mas muitas vezes você vai precisar que outras pessoas e domínios consumam sua API, certo?

É aí que entra uma parada chamada Cross Origin Resource Sharing, ou CORS. Que é basicamente uma forma de você falar para o seu serviço: Ei, pode aceitar requisições de outros domínios!

Habilitando CORS

A primeira coisa é instalar o pacote do CORS. Vai lá no seu Package Manager Console e digite:
Install-Package Microsoft.AspNet.WebApi.Cors

Aí vai lá no seu método ConfigureServices que fica dentro da classe Startup e adicione a seguinte linha de código:

Em seguida, ainda na classe Startup adicione esse código no método Configure:

Basicamente você tá dizendo: Ei api, aceite requisições de qualquer lugar, pra qualquer método HTTP (GET, POST, etc), com qualquer cabeçalho.

Tem como fazer essa configuração diferente e aceitando apenas alguns métodos ou origens específicas. Pra mais detalhes dá uma olhada aqui na documentação da Microsoft.

Mas eu continuo com o mesmo erro!

Pois é, mesmo depois de ter feito isso eu continuei com o erro e abri essa questão no Stack Overflow.

O que tava acontecendo era o seguinte: na verdade o método que eu tava chamando na minha API internamente tava dando uma Exception por causa de uma referência nula. Ou seja, erro do meu código mesmo.

O meu serviço na verdade tava retornando erro 500 (internal server error), mas quando isso acontece os cabeçalhos do CORS não são setados na Response que vai pro navegador. E aí ele não entende nada.

Testei com o Postman montando a requisição na mão e bum, tava lá no corpo da Response na real o que tava acontecendo era um erro interno, não problema de CORS.

Acertei o código e boa, resolvido :)


Quer ficar em dia com os meus posts e novidades? Se inscreva na minha newsletter, me segue no Twitter e na minha página!

comments powered by Disqus