本地浏览器调用Azure静态Web应用Azure函数遭CORS策略拦截

浏览器同源策略会自动拦截不符合规则的跨域请求，Postman不属于浏览器环境，不受CORS规则限制，所以可以正常调用接口。
你遇到的报错核心是：Azure Static Web App边缘节点收到浏览器发出的OPTIONS预检请求后，没有在响应里返回匹配http://localhost:44388源的Access-Control-Allow-Origin头，所以浏览器直接拦截了后续的实际请求。
注意：托管在Azure Static Web App /api路径下的Azure Function，不会使用独立Function App的CORS配置，所有CORS规则由Static Web App统一管控，你在Function代码里手动加CORS头会被边缘节点覆盖，不会生效。

方案1：Azure门户直接配置CORS（最快生效） #

• 打开Azure门户，进入你部署的Static Web App资源页
• 左侧导航栏找到「设置」分类下的「配置」选项
• 切换到「跨源资源共享(CORS)」标签页
• 在允许来源列表中添加http://localhost:44388，生产环境如果有固定的客户端访问域名也一并添加
• 不要勾选「允许所有来源(*)」选项，该配置存在安全风险，且无法携带身份认证凭据
• 点击保存，等待1-2分钟配置生效后再重试请求即可

方案2：通过配置文件固化CORS规则（推荐，可跟随代码版本管理） #

在你的Static Web App发布根目录新建staticwebapp.config.json文件，写入如下配置，部署后会自动覆盖门户中的CORS配置：

{
  "globalHeaders": {
    "Access-Control-Allow-Origin": "http://localhost:44388",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Authorization"
  },
  "routes": [
    {
      "route": "/api/*",
      "methods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"]
    }
  ]
}

如果需要允许多个源，不要直接在Access-Control-Allow-Origin里写多个地址，需要通过路由规则匹配请求的Origin头动态返回对应值，多源配置示例：

{
  "routes": [
    {
      "route": "/api/*",
      "methods": ["OPTIONS"],
      "headers": {
        "Access-Control-Allow-Origin": "{request.headers.origin}",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization"
      }
    }
  ]
}

注意：配置后要确保你的Function代码里没有手动添加CORS相关响应头，否则会出现重复头问题，依然触发CORS报错。

本地联调额外配置 #

如果你使用Azure Static Web App CLI做本地开发联调，启动时需要指定允许的本地开发源，避免本地调试时出现CORS问题：

swa start ./your-static-content-path --api ./your-function-project-path --devserver-url http://localhost:44388

MAUI客户端特殊说明 #

如果你的MAUI应用是打包为原生桌面/移动端程序运行，原生环境下不受浏览器CORS策略限制，只有Blazor MAUI在本地Web视图中调试时才会触发这个跨域问题，正式发布时可以将配置中的localhost地址移除，只保留生产环境需要的访问源即可。

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