如何为Azure Static Web App内的Azure Function配置CORS

问题说明 #

Azure Functions支持在独立Function App中配置CORS策略，但如果是绑定在Azure静态Web应用（SWA）内创建的托管函数，SWA的管理界面暂不提供直接的CORS配置入口，对应界面截图如下：

具体配置方案 #

你可以通过以下两种方式完成CORS配置：

• 全局配置（推荐）
  在静态Web应用项目根目录的staticwebapp.config.json配置文件中添加globalHeaders节点，统一配置跨域响应头，示例如下：

  {
    "globalHeaders": {
      "Access-Control-Allow-Origin": "https://你的允许域名.com",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization"
    }
  }
  

  配置修改后重新部署静态Web应用即可生效，如果需要允许所有源访问，可将Access-Control-Allow-Origin的值设为*。
• 单函数独立配置
  如果只需要部分函数支持跨域，可以直接在函数的响应逻辑中添加CORS头，以Python函数为例：

  import azure.functions as func
  
  def main(req: func.HttpRequest) -> func.HttpResponse:
      headers = {
          "Access-Control-Allow-Origin": "https://你的允许域名.com",
          "Access-Control-Allow-Methods": "GET, POST",
          "Access-Control-Allow-Headers": "Content-Type"
      }
      # 处理OPTIONS预检请求
      if req.method == "OPTIONS":
          return func.HttpResponse("", status_code=200, headers=headers)
      # 正常业务逻辑
      return func.HttpResponse("响应内容", status_code=200, headers=headers)
  

注意：绑定到静态Web应用的函数，独立Function App资源中的CORS配置不会生效，无需修改关联Function App的CORS设置。

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