如何配置Azure静态Web应用重写规则转发API请求至外部URL？

Azure静态Web应用支持将API请求转发至外部URL，你的配置存在格式和优先级问题，以下是解决方案：

正确的staticwebapp.config.json配置 #

{
  "routes": [
    {
      "route": "/api/{*path}",
      "rewrite": "https://backend.com/api/{path}",
      "allowedMethods": ["GET", "POST", "PUT", "DELETE"]
    }
  ],
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*", "/api/*"]
  }
}

核心修改说明 #

• 路由匹配使用{*path}通配符捕获所有API子路径，确保/api/somerequest能准确映射到外部API的对应端点
• 重写目标明确拼接/api/{path}，避免路径拼接错误导致请求指向无效地址
• 添加allowedMethods声明支持的HTTP方法，解决405方法不允许错误
• 导航回退规则中排除/api/*，防止API请求被SPA路由回退拦截而返回index.html

额外排查要点 #

1. 405错误验证：直接测试外部API的https://backend.com/api/somerequest端点，确认其支持你发起的请求方法（如POST）
2. 路由优先级：确保API路由规则在routes数组中排在最前面，因为Azure静态Web应用按顺序匹配路由，先匹配的规则生效
3. CORS配置：检查外部API的CORS设置，允许前端Azure静态Web应用的域名跨域访问

内容的提问来源于stack exchange，提问作者mr-woodapple