Olá,
hoje vou falar sobre o CORS – Cross-Origin Resource Sharing que significa compartilhamento
de recursos de origem cruzada.
Antes
era muito comum o uso de iFrames ou similares para fazer com que um site
acessasse diretamente conteúdo de outros o que também era válido para aplicações
web mais complexas, o problema é que isso começou a ser explorado por pessoas
mal intencionadas para se passarem por um site ou serviço que não são e roubar
informações ou outras atividades ilícitas. Então os navegadores começaram a “bloquear”
esse tipo de coisa, validando antes se a origem tem acesso ao backend vindo de
um IP diferente ou não configurado em uma digamos “White list”.
Trarar
o CORS é obrigação do backend ou infra, mas é possível e também uma boa prática
tratar no frontend. Para isso criamos um Proxy no nosso frontend. Como
funciona um proxy? Ele recebe a requisição e a repassa com uma nova
configuração de rede.
Vamos criar o nosso proxy, crie
um arquivo chamado proxy.config.js no mesmo diretório em que se encontra
o seu package.json com o seguinte
conteúdo:
{
"/api":
{
"target":
"http://localhost:8080", //endereço do backend
"secure": false
}
}
Agora configure dentro do
seu angular.json o uso do proxy:
...
"defaults":{
"serve":{
"proxyConfig":"./proxy.config.js"
}
...
"defaults":{
"serve":{
"proxyConfig":"./proxy.config.js"
}
...
Fonte:
Para ver todas as opções da configuração de proxy
veja:
https://webpack.js.org/configuration/dev-server/#devserver-proxy
