Configurar o CORS

  • 3 minutos

A API foi criada e você está pronto para conectar o aplicativo Web front-end e realmente ver esse projeto funcionar. Mas antes de fazer isso, você precisa dizer à API que não há problema em o aplicativo front-end chamá-la. Essa conexão é feita com algo chamado Cross-Origin Resource Sharing, ou CORS.

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

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

É comum no desenvolvimento definir o valor CORS como "*". O "*" significa que todos e seus animais de estimação (embora os animais de estimação tenham problemas para digitar) podem acessar esta API. O CORS é uma definição necessária apenas num ambiente de produção, pelo que é útil desligá-lo na fase de 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 CORS é bom para o desenvolvimento, mas perigoso na produção. Ao configurar o CORS em um aplicativo do Azure Functions implantado, a configuração do aplicativo deve ser alterada para a URL do aplicativo front-end quando essa API for implantada na produção.

Como o desenvolvedor inteligente que você é (Tailwind Traders está além da sorte de tê-lo), você configura a API para permitir o acesso durante o desenvolvimento. Agora você pode iluminar o front-end e ver o aplicativo Gerenciador de Produtos em toda a sua glória.