Exercise - Configure CORS

Completed

In this exercise, you'll configure CORS in Azure Functions and see the Product Manager application come to life.

Configure CORS

  1. Open the api/local.settings.json file.

  2. Add a "Host" section below the "Values" property. Set the "CORS" value on "Host" to "*".

    {
      "IsEncrypted": false,
      "Values": {
        "AzureWebJobsStorage": "",
        "FUNCTIONS_WORKER_RUNTIME": "node",
        "CONNECTION_STRING": "PASTE YOUR CONNECTION STRING HERE"
      },
      "Host": {
        "CORS": "*"
      }
    }
    
  3. If the API is still running, restart the process by clicking on the "disconnect" button in the debug bar and then press F5 to start it again.

Check the front-end app

  1. The front-end app should still be running in a browser tab on port 5000. Refresh the page.

  2. The app loads in the data from the API.

    Screenshot of web browser displaying the Products Manager application shown populated with data.

  3. To ensure that all endpoints work, try creating, updating, and deleting products.

That app looks good. It looks very good. None of it would be possible without your brilliant API. Ready to test what you've learned?