Configurar o CORS

  • 3 minutos

A API foi criada, e você está pronto para conectar o aplicativo Web front-end e, na verdade, ver este trabalho do projeto. Mas, para fazer isso, informe à API que o aplicativo de front-end pode chamá-la. Essa conexão é feita com algo chamado CORS ou Compartilhamento de recurso entre origens.

Modificar as configurações de CORS para o aplicativo local do Azure Functions

Você pode especificar os domínios e as portas aos quais sua API escuta. Especifique a propriedade CORS, em Host no arquivo local.settings.json na pasta principal do projeto de função. O arquivo local.settings.json é o mesmo arquivo em que você armazenou a cadeia de conexão de banco de dados.

No desenvolvimento, é comum definir o valor de CORS como "*". O "*" significa que todas as pessoas e os animais de estimação delas (embora eles tenham certa dificuldade para digitar algo) podem acessar essa API. O CORS é apenas uma configuração de que você precisa em um ambiente de produção. Portanto, é útil essencialmente desativá-lo durante o desenvolvimento.

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "CONNECTION_STRING": "AccountEndpoint=https://tailwind-traders-2778.documents.azure.com..."
  },
  "Host": {
    "CORS": "*"
  }
}

Aviso

O curinga * para uma configuração de CORS é bom para o desenvolvimento, mas perigoso na produção. Ao configurar o CORS em um aplicativo implantado do Azure Functions, a configuração do aplicativo deve ser alterada para a URL do aplicativo front-end quando essa API for implantada na produção.

Como você é um desenvolvedor esperto (a Tailwind Traders tem muita sorte de tê-lo), você configura a API para permitir o acesso durante o desenvolvimento. Agora você pode acionar o front-end e ver o aplicativo Gerenciador de Produtos em toda a sua glória.