Na transição de um WordPress tradicional para um backend Headless que alimentará uma aplicação Angular, a primeira barreira é a camada de segurança do servidor de hospedagem. O sintoma inicial foi um erro 406 Not Acceptable ao tentar utilizar o login social do Google via plugin Nextend.

O erro não estava na aplicação, mas no firewall de aplicação web (WAF) do servidor Apache, o ModSecurity. O Google retorna um payload de autenticação longo e complexo na URL de callback, que o WAF interpreta como um ataque de injeção.

A mitigação definitiva não é desligar o firewall do site inteiro, mas atuar de forma cirúrgica com a equipe de infraestrutura. A resposta oficial do suporte da HostGator documenta exatamente o que ocorre nos bastidores:

“A principio eram duas 2 regras do mod_sec gerando bloqueio, basicamente o servidor estava interpretando como suspeito, como uma tentativa de injeção de codigo malicioso no servidor. Rodei um comando aqui por parte do servidor para identificar o que iria contar nos logs de bloqueio, constou essas duas regras 340165 e 340163. Nesses caso, basta vir no chat que verificamos nos logs, caso seja com um caso parecido pode solicitar direto a liberação dessas duas regras que informei acima.”

Com o login resolvido, preparamos o terreno para o Angular consumindo a API. Em vez de inflar o WordPress com plugins de CORS (Cross-Origin Resource Sharing), aplicamos o princípio KISS diretamente no arquivo .htaccess, liberando os headers necessários para a comunicação SPA-Backend:

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT, DELETE"
  Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>

Acompanhe para saber mais