如何解决本地运行的Angular应用连接Azure静态Web应用生产环境Azure Function API的CORS问题

你遇到的问题很常见——因为Azure Static Web App（SWA）集成的Azure Functions和独立的Function App配置逻辑不同，所以常规的Function App CORS设置入口找不到。下面给你三种可行的解决方案，按推荐程度排序：

方法一：通过staticwebapp.config.json配置CORS（推荐，代码化可版本控制） #

SWA允许通过根目录的staticwebapp.config.json文件统一配置跨域规则，这个配置会直接作用于集成的API。

1. 在你的Angular项目根目录创建staticwebapp.config.json文件
2. 填入以下配置（可根据实际需求调整）：

{
  "globalHeaders": {
    "Access-Control-Allow-Origin": "http://localhost:4200,https://yyy.azurestaticapps.net",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Authorization"
  }
}

• 多个允许的源用逗号分隔，开发阶段可以临时用*允许所有源，但生产环境建议明确指定域名，避免安全风险
• 确保这个文件会被包含在Angular的构建输出中（比如放在src目录，或者调整angular.json的assets配置）

3. 重新部署你的SWA，配置会自动生效

方法二：在Azure Portal直接配置SWA的CORS规则 #

如果不想修改代码，可以通过Azure门户直接设置：

• 登录Azure Portal，找到你的Static Web App资源
• 左侧导航栏点击配置（Configuration）
• 在CORS区域，点击添加，输入http://localhost:4200
• 保存设置，等待1-2分钟让配置生效

这里要注意：SWA的CORS设置不在独立的Function App页面里，而是在SWA自身的配置面板中，这也是很多人找不到入口的核心原因。

方法三：本地使用Angular代理转发请求（无需修改生产配置） #

如果不想改动生产环境的任何设置，适合临时测试的话，可以用Angular的代理功能把本地请求转发到生产API：

1. 在Angular项目根目录创建proxy.conf.json文件：

{
  "/api/*": {
    "target": "https://yyy.azurestaticapps.net",
    "secure": true,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

2. 修改angular.json里的serve配置，添加proxyConfig参数：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的应用名称:build",
    "proxyConfig": "proxy.conf.json"
  }
}

3. 用ng serve启动本地应用，此时所有/api开头的请求会被自动转发到生产API，浏览器发起的请求都是同域的http://localhost:4200/api/...，不会触发CORS错误

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