CORREÇÃO: Nenhum erro de cabeçalho access-control-allow-origin no Angular

Uma das mensagens de erro mais comuns que os desenvolvedores Angular podem encontrar em seu trabalho diário é: nenhum cabeçalho access-control-allow-origin presente no recurso solicitado.

Este não é um problema Angular específico, mas um CORS (Problema de cabeçalho de compartilhamento de recursos de origem cruzada). Isso pode significar que o servidor back-end está configurado para funcionar em uma porta ou domínio diferente.

---

Como faço para corrigir o erro Sem controle de acesso no Windows 10?

1. Faça alterações no nível do servidor

Se você tiver acesso ao servidor, habilite as solicitações CROS adicionando Access-Control-Allow-Origin: * cabeçalho. Depois disso, configure cors entrada, sob system.webServer dentro web.config arquivo, como no exemplo abaixo.

• ”1.0″?
• habilitado ="verdadeiro">
• origem =“ https://someorigin.domain.com”>
• método ="OBTER"/>
• método ="CABEÇA"/>
• </system.webServer>

Aqui, cors permitirá OBTER e CABEÇA pedidos de https://someorigin.domain.com/.

Além disso, se você estiver usando IIS (Internet Information Services) você precisaria baixar Módulo IIS CORS.

Tenha o cuidado de especificar um domínio ou uma lista de domínios em vez de *. Caso contrário, as solicitações de origem cruzada para o servidor seriam habilitadas de qualquer lugar.

Sobre Apache, no arquivo de configuração, você precisa adicionar a linha Cabeçalho definido Access-Control-Allow-Origin ‘*’. Novamente, é aconselhável substituir o '*' por uma lista de fontes de onde as solicitações seriam feitas.

---

2. Execute seu próprio servidor proxy

1. Em primeiro lugar, vamos criar um arquivo de configuração de proxy, na pasta Angular raiz, chamado src / proxy.conf.json, e escreva o seguinte código nele:
   • {"/ api":
   • "alvo":" http://localhost: 6000 "," seguro ": falso}
   • }
2. Em segundo lugar, no angular.jsonarquivo, adicione o proxyConfigopção no servir alvo:
   • "servir": {
   • "construtor":" ",
     
   • "opções":{"proxyConfig":"src / proxy.conf.json"}
     
   • }
3. Agora execute a configuração atual com o ng serve comando.

Um servidor proxy encaminharia suas solicitações para o servidor remoto. A seguir, veremos como configurar um servidor proxy.

As solicitações de dados em Angular são chamadas de API para localhost, na porta 4200, como este local:

• http://localhost: 4200 / api / datareq.

No entanto, no exemplo acima, presumimos que os dados solicitados estão em este local:

• http://localhost: 6000 / api / datareq.

---

Interessado em boas soluções de proxy? Confira esta lista de ferramentas dedicadas

---

3. Dé possível usar a política da mesma origem em seu navegador

Observação: esse método específico não é recomendado, pois pode expor seu navegador (e seu sistema) a grandes riscos de segurança.

Se tudo mais não estiver funcionando, você pode recorrer à desativação da Política de Mesma Origem no navegador. No entanto, tome cuidado, pois isso exporia seu navegador (e seu sistema) a grandes riscos de segurança.

Para Google Chrome, no Windows 10, abra o Prompt de Comando como administrador e execute o seguinte comando:

C: Arquivos de programa (x86) GoogleChromeApplicationchrome.exe "--disable-web-security --disable-gpu --user-data-dir = ~ / chromeTemp..

Em conclusão, nenhum cabeçalho access-control-allow-origin presente no recurso solicitado a mensagem de erro é um problema do lado do servidor.

Para desenvolvedores Angular, modificar a configuração do servidor ou usar um servidor proxy deve funcionar perfeitamente.

Diga-nos o que você acha deste guia na seção de comentários abaixo.

---

---