[Dúvida] Problema de CORS | Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD

Eu tive um problema de CORS e consegui resolver criando o arquivo proxy.config.js e alterando algumas coisas no package.json. No arquivo proxy.config.js:

const PROXY_CONFIG = [
  {
    context:['/api'],
    target:'http://localhost:3000/',
    pathRewrite:{'^/api':''}
  }
];

module.exports = PROXY_CONFIG;

Alteração no arquivo package.json adicionei --proxy-config proxy.config.js no comando start

 "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

Depois tive que mudar o caminho da API para ficar de acordo /api/pensamentos.

Minha dúvida é por que a instrutora não teve esse problema? Ou será que ela teve mas não mostrou (não faz sentido)? Tem outra forma de fazer isso?

Oi Flávio, tudo bem?

O problema de CORS (Cross-Origin Resource Sharing) ocorre quando uma requisição feita por um aplicativo web é bloqueada pelo navegador devido a políticas de segurança. É comum encontrar esse problema ao fazer requisições para um servidor diferente do que está servindo o aplicativo web.

A solução que você encontrou, criando o arquivo proxy.config.js e alterando o package.json, é uma forma de contornar o problema de CORS. Ao fazer isso, você está configurando um proxy para redirecionar as requisições feitas para /api para o servidor http://localhost:3000/, evitando assim o bloqueio do navegador.

Quanto à sua dúvida sobre a instrutora não ter tido esse problema, é possível que ela tenha configurado o servidor de uma forma que não seja necessário lidar com o CORS. Existem diferentes formas de configurar um servidor e cada uma pode ter suas particularidades. Por isso, é comum encontrar soluções diferentes para o mesmo problema.

Além da solução que você encontrou, existem outras formas de lidar com o problema de CORS. Uma delas é configurar o servidor para enviar os cabeçalhos CORS corretos, permitindo assim as requisições do aplicativo web. Outra forma é utilizar um serviço de proxy reverso, como o NGINX, para redirecionar as requisições do aplicativo web para o servidor correto.

Um abraço e bons estudos.

Mergulhe em programação