CORS header 'Access-Control-Allow-Origin' missing - Como resolver os principais erros no CORS da sua API

02/06/2021

Meu relato com um passo a passo básico com meu processo para resolver um erro relacionado ao CORS (Cross-origin Resource Sharing) em um projeto onde foi criado uma api em laravel um fontend hospedado em servidor separado em vue.js e utilizando axios para realizar as requisições

1 - O que é cors?

CORS é um mecanismo utilizado pelos navegadores para compartilhar recursos entre diferentes origens. E faz uso de headers do HTTP para informar aos navegadores se determinado recurso pode ser ou não acessar. - mais informações na página de referência

2 - Como resolver?

Você verificou se sua api possui Access-Control-Allow-Origin ?

Parece óbvio mas eu já me deparei com esse erro. Ultimamente estava desenvolvendo uma api em php no Laravel e a requisição funcionava no postman, mas não funcionava na minha aplicação. Tinha certeza que tinha configurado tudo certo, mas era a primeira vêz usando laravel. Quando fui testar com o postman (olhar na dica 1) percebi que apesar de ter configurado o meu header não dava acesso a minha origem.


  • Dica 1

Testar olhando o header do postman. Ao usar o postman e fazer o request para sua api você vai receber muitas informações interessantes. Mas não significa que caso sua api funcione no postman ela funcione no navegador. Pois existe o sistema Cross-origin Resource Sharing e a informação terá que passar nesse segundo método. Por isso é válido observar uma aba ao lado da aba que consegue ver o response da sua informação, mais ou menos assim:

nesse caso você deve se perguntar: O header da sua api está configurada corretamente?

Bem o meu não estava, por isso resolvi o problema na api em php no laravel adicionando as seguintes linhas de comando em cima do meu api.php:

Se você for um programador atencioso e cuidadoso deve ter pensado algo como: "sem segurança" Porque de feto permitir o acesso de todos a sua api e uma opção meio insegura para não dizer completamente irresponsável. Eu sei, mas você tem que entender que eu era um programador desesperado tentando resolver um problema. O tema segurança e para outro post, não esse!

  • dica 2: 

Após verificar que minha api estava funcionando como o esperado, outro erro surgiu.

Para ser totalmente sincero até agora não sei direito a lógica por trás da minha solução, mas o problema aparentemente era que eu estava usando uma requisição axios dentro de outra. E eu sei que muitos de vocês vão rir da minha cara, e dizer que não se pode fazer isso, e tudo bem. Mas o ponto é: Se você percebeu que não tem mais nenhum erro com sua api, então provavelmente o erro está na sua requisição

Com essa informação o que você pode fazer e algo chamado método pato de borracha. Já ouviu falar dele?

Se não, não precisa se preocupar. Eu vou ensinar ele aqui.

Esse é o método que eu me recorro para resolver quase todos meus erros. E ele é bem simples:

  1. (opcional) Comprar um pato de borracha.
  2. Descreva seu código em voz alta para o pato, como se tivesse explicando para alguém.
  3. não espere que o pato responda, mas saiba que ao explicar tudo que está acontecendo no código e a lógica a solução deve aparecer naturalmente.

Se esse artigo foi útil para você, considere se inscrever na nossa newslleter. Demora menos de um minuto e você vai ficar informado de artigos como esse e muito mais. Só precisamos do seu email: