如何将Azure Static App对接托管在Azure App Service等平台的REST API

Azure Static Web App 内置的路由转发能力不限制后端服务类型，只要是公网可访问的API端点都可以对接，无需绑定Azure Function App。

对接Azure App Service托管API的配置步骤 #

• 第一步：在Angular项目的根目录（或构建后的dist输出目录）新增staticwebapp.config.json配置文件，示例内容如下：

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/api/*"]
  },
  "routes": [
    {
      "route": "/api/*",
      "rewrite": "https://<你的Azure App Service公网域名>/api/{*restOfPath}",
      "allowedRoles": ["anonymous", "authenticated"],
      "methods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"]
    }
  ]
}

• 第二步：在Azure App Service的CORS配置面板中，添加你的Azure Static Web App的正式域名和预览环境域名，允许对应请求方法，避免跨域拦截。生产环境建议关闭CORS通配符，仅允许可信域名访问。
• 第三步：正常发布Angular应用到Azure Static Web App即可，所有前缀为/api的请求会自动转发到你配置的App Service端点。

对接AWS/GCP等第三方云平台API的配置 #

该配置逻辑完全通用，仅需要将上述配置中rewrite的域名替换为你实际的API端点地址即可：

• AWS平台可替换为API Gateway、EC2/ECS托管API的公网域名
• GCP平台可替换为Cloud Run、GKE托管API、Cloud Endpoints的公网域名
• 需额外注意提前在对应云平台的API网关/服务配置中放行Azure Static Web App的域名跨域请求，确保OPTIONS预检请求正常响应。

本地开发对齐配置 #

为了保证本地开发和生产环境接口调用逻辑一致，无需切换接口前缀，可在Angular项目中新增本地代理配置：

1. 根目录新增proxy.conf.json文件，示例如下：

{
  "/api": {
    "target": "http://localhost:<本地API端口>", // 也可直接填写云API地址
    "secure": false,
    "changeOrigin": true
  }
}

2. 启动开发服务时执行命令：ng serve --proxy-config proxy.conf.json

内容的提问来源于stack exchange，提问作者santosh kumar patro