Docker部署Azure v3 HTTP触发函数与Angular通信出现CORS错误如何解决

问题核心原因 #

Postman不会触发浏览器的CORS预检规则，所以请求可以成功；你遇到的错误是浏览器发起OPTIONS预检请求时，Azure Function没有返回正确的CORS响应头导致的，以下是可落地的解决方案：

• 修正.env文件的环境变量格式：你当前配置的CORS_ALLOWED_ORIGINS外层多了单引号，容器读取时会将单引号作为值的一部分，导致CORS规则解析失败。修改为：

CORS_ALLOWED_ORIGINS=["http://localhost:4200"]

• 补全docker compose中的CORS相关环境变量：Azure Function运行时需要同时配置允许的请求方法和请求头，才能正确处理OPTIONS预检请求，修改compose的environment配置段：

myhttpfunction:
    image: ${DOCKER_REGISTRY-}httptriggeredfunc
    container_name: azurefunctions
    build: 
      context: .
      dockerfile: app/HttpFunctions/Dockerfile
    environment: 
      - CORS_ALLOWED_ORIGINS
      - CORS_ALLOWED_METHODS=["GET","POST","PUT","DELETE","OPTIONS"]
      - CORS_ALLOWED_HEADERS=["*"]
    ports: 
      - 9080:80

• 检查镜像中的local.settings.json配置：如果你的Dockerfile将本地开发用的local.settings.json打包到了镜像中，该文件里的CORS配置优先级会高于环境变量，要么删除该文件里的CORS相关配置，要么在Dockerfile中排除该文件的复制操作。
• 兜底方案：代码层面处理预检请求：如果上述配置都不生效，可以直接在HTTP触发函数中添加OPTIONS请求的处理逻辑，主动返回CORS响应头，示例（C#为例，其他语言逻辑一致）：

[FunctionName("GetData")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", "options", Route = null)] HttpRequest req,
    ILogger log)
{
    // 处理预检请求
    if (req.Method == HttpMethods.Options)
    {
        var result = new OkResult();
        req.HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:4200");
        req.HttpContext.Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
        req.HttpContext.Response.Headers.Add("Access-Control-Allow-Headers", "*");
        return result;
    }
    // 原有业务逻辑
    ...
}

修改完成后重新构建镜像并启动容器即可生效。

内容的提问来源于stack exchange，提问作者Arash