Azure Functions

HTTP Trigger CORS Configuration

This document explains how to configure Cross-Origin Resource Sharing (CORS) for Azure Functions when using HTTP Triggers.

Note: CORS is a browser security feature that restricts web pages from making requests to a different domain than the one that served the web page. Azure Functions provides built-in support for configuring CORS.

Why Configure CORS?

By default, a browser will block requests from a web application hosted on one domain (e.g., www.example.com) to an API hosted on another domain (e.g., my-functions.azurewebsites.net). To allow such requests, you need to configure CORS on your Azure Function's HTTP endpoint.

Configuring CORS

You can configure CORS for your Azure Functions application using the Azure portal, the Azure CLI, or by directly editing the host.json file.

1. Using the Azure Portal

  1. Navigate to your Azure Function App in the Azure portal.
  2. In the left-hand menu, under "API", select CORS.
  3. In the CORS pane, you can specify allowed origins.
  4. Add allowed origins: Enter the domain(s) that your web application will be making requests from. For example, to allow requests from https://www.example.com, enter that URL. You can also use wildcards like https://*.example.com.
  5. Allow credentials: If your client-side application needs to send cookies or HTTP authentication headers, check the "Allow credentials" box.
  6. Click Save.

Azure Portal CORS Settings Example

Imagine your web application is hosted at https://mywebapp.azurewebsites.net. You would add this origin to the allowed list.

For development, you might also allow localhost:

2. Using host.json

The host.json file allows you to configure various aspects of your Function App, including CORS. You can add a cors section to your host.json file.

Example host.json Configuration

{
  "version": "2.0",
  "logging": {
    "applicationInsights": {
      "samplingSettings": {
        "isEnabled": true,
        "excludedTypes": "Request"
      }
    }
  },
  "extensions": {
    "http": {
      "routePrefix": "api"
    }
  },
  "cors": [
    {
      "origins": [
        "https://www.example.com",
        "https://subdomain.example.com",
        "http://localhost:8080"
      ],
      "headers": [
        "Content-Type",
        "Authorization",
        "X-Requested-With"
      ],
      "methods": [
        "GET",
        "POST",
        "PUT",
        "DELETE",
        "OPTIONS"
      ],
      "maxAge": "600"
    }
  ]
}

Understanding host.json CORS Properties:

Important: When using host.json, the cors property is an array of objects, allowing for different CORS rules for different origins or configurations. If you define CORS in both the portal and host.json, the settings from host.json take precedence.

3. Using Azure CLI

You can also configure CORS using the Azure CLI. The following command adds an allowed origin:

Azure CLI Command Example

az functionapp cors add --resource-group <your-resource-group> --name <your-function-app-name> --allowed-origins <your-allowed-origin>

To set multiple origins:

az functionapp cors add --resource-group <your-resource-group> --name <your-function-app-name> --allowed-origins "https://www.example.com" "http://localhost:3000"

To clear all CORS origins (use with caution):

az functionapp cors clear --resource-group <your-resource-group> --name <your-function-app-name>

Testing Your CORS Configuration

After configuring CORS, you can test it by making a request from your client-side application to your Azure Function's HTTP endpoint. Use your browser's developer tools (Network tab) to inspect the response headers for Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers.

Common Issues and Troubleshooting