cloud config_error ai_generated true

Access to fetch at 'https://myfuncapp.azurewebsites.net/api/endpoint' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ID: cloud/azure-function-app-cors-origin-not-allowed

Also available as: JSON · Markdown · 中文
85%Fix Rate
82%Confidence
1Evidence
2023-03-10First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Azure Functions Runtime 4.x active — — —
Azure API Management 2022-09-01-preview active — — —

Root Cause

Azure Function App's CORS configuration does not include the requesting origin, or the function app uses an API Management layer that strips CORS headers.

generic

中文

Azure Function App 的 CORS 配置未包含请求源，或者函数应用使用了会剥离 CORS 标头的 API 管理层。

Official Documentation

https://learn.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings#cors

Workarounds

  1. 90% success In the Azure Portal, go to the Function App -> CORS -> add the allowed origin (e.g., https://myapp.com) in the allowed origins list. Ensure 'Enable Access-Control-Allow-Credentials' is unchecked if using wildcards. 
    In the Azure Portal, go to the Function App -> CORS -> add the allowed origin (e.g., https://myapp.com) in the allowed origins list. Ensure 'Enable Access-Control-Allow-Credentials' is unchecked if using wildcards.
  2. 85% success If using Azure API Management, configure CORS policy at the API level: add a <cors> policy with <allowed-origins> element containing the origin URL. 
    If using Azure API Management, configure CORS policy at the API level: add a <cors> policy with <allowed-origins> element containing the origin URL.
  3. 75% success Example code for manual CORS handling in a Python function: response = func.HttpResponse(body=..., status_code=200, headers={'Access-Control-Allow-Origin': 'https://myapp.com'}) 
    Example code for manual CORS handling in a Python function: response = func.HttpResponse(body=..., status_code=200, headers={'Access-Control-Allow-Origin': 'https://myapp.com'})

中文步骤

  1. 在 Azure 门户中，转到 Function App -> CORS -> 在允许的来源列表中添加允许的来源（例如 https://myapp.com）。如果使用通配符，请确保取消选中 '启用 Access-Control-Allow-Credentials'。
  2. 如果使用 Azure API 管理，请在 API 级别配置 CORS 策略：添加 <cors> 策略，其中包含 <allowed-origins> 元素和来源 URL。
  3. Python 函数中手动处理 CORS 的示例代码：response = func.HttpResponse(body=..., status_code=200, headers={'Access-Control-Allow-Origin': 'https://myapp.com'})

Dead Ends

Common approaches that don't work:

  1. 65% fail

    Azure Functions' built-in CORS middleware may override custom headers if both are present.

  2. 75% fail

    Browsers send a preflight OPTIONS request; if the function does not handle it, the actual request is blocked.