CORS configureren

  • 3 minuten

De API is gemaakt en u bent klaar om verbinding te maken met de front-endwebtoepassing en dit projectwerk daadwerkelijk te zien. Maar voordat u dat kunt doen, moet u de API laten weten dat het goed is voor de front-endtoepassing om deze aan te roepen. Deze verbinding wordt gemaakt met iets met de naam Cross-Origin Resource Sharing of CORS.

CORS-instellingen voor lokale Azure Functions-app wijzigen

U kunt de domeinen en poorten opgeven waarnaar uw API luistert. Geef de CORS-eigenschap onder Host op in het bestand local.settings.json in de hoofdmap van het functieproject. Het local.settings.json bestand is hetzelfde bestand waarin u de database verbindingsreeks hebt opgeslagen.

Het is gebruikelijk in ontwikkeling om de CORS-waarde in te stellen op "*". Dit "*" betekent dat iedereen en hun huisdier (hoewel huisdieren problemen hebben met typen) toegang hebben tot deze API. CORS is slechts een instelling die u in een productieomgeving nodig hebt. Het is dus in eerste instantie handiger om deze tijdens het ontwikkelen uit te schakelen.

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

Waarschuwing

Het jokerteken * voor een CORS-instelling is prima voor ontwikkeling, maar gevaarlijk in productie. Wanneer u CORS configureert in een geïmplementeerde Azure Functions-app, moet de toepassingsinstelling worden gewijzigd in de URL van de front-endtoepassing wanneer deze API wordt geïmplementeerd in productie.

Als de slimme ontwikkelaar die u bent (Tailwind Traders heeft meer geluk met u), configureert u de API om toegang te verlenen tijdens de ontwikkeling. Nu kunt u de front-end oplichten en de Products Manager-app in al zijn glorie zien.