Azure Static Web App子域名重定向至内部路径方法咨询

针对你的需求，Azure Static Web App（SWA）可以通过带主机头条件的路由规则实现子域名到内部路径的重定向，无需依赖.htaccess或web.config（这两个文件在SWA环境中不生效）。以下是具体实现步骤：

核心配置：staticwebapp.config.json #

SWA的专属配置文件staticwebapp.config.json支持基于请求主机头的路由规则，你需要添加带host条件的重定向规则，示例配置如下：

{
  "routes": [
    // 匹配abc.mydomain.com下的所有请求，重定向到mydomain.com/abc路径
    {
      "route": "/*",
      "redirect": "/abc{path}",
      "conditions": {
        "host": "abc.mydomain.com"
      },
      "statusCode": 301
    }
  ],
  // 保留Angular应用的导航回退规则（确保单页应用路由正常）
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*", "/js/*"]
  }
}

配置说明： #

• route: "/*"：匹配子域名下的所有路径（包括根路径和子路径）
• redirect: "/abc{path}"：将请求重定向到主域名的/abc路径，{path}会保留原请求的路径后缀（例如abc.mydomain.com/detail/123会重定向到mydomain.com/abc/detail/123）
• conditions.host：指定规则仅对abc.mydomain.com这个子域名生效
• statusCode: 301：使用永久重定向（利于SEO），若需临时重定向可改为302

前置验证步骤 #

1. 确认子域名abc.mydomain.com已正确绑定到SWA：
   • DNS中配置的CNAME记录已指向SWA的默认域名（例如xxx.azurestaticapps.net）
   • 在Azure Portal的SWA自定义域名页面中，该子域名已完成验证并处于启用状态
2. 确保Angular应用的路由模块中已配置/abc对应的路由（避免重定向后出现404）

部署与测试 #

1. 将修改后的staticwebapp.config.json放在Angular项目的src目录下（确保打包后会输出到dist文件夹的根目录）
2. 重新部署Angular应用到SWA
3. 访问abc.mydomain.com，验证是否自动重定向到mydomain.com/abc

扩展：多子域名重定向 #

如果需要多个子域名对应不同内部路径，只需在routes数组中添加多条规则：

{
  "routes": [
    {
      "route": "/*",
      "redirect": "/abc{path}",
      "conditions": {
        "host": "abc.mydomain.com"
      },
      "statusCode": 301
    },
    {
      "route": "/*",
      "redirect": "/def{path}",
      "conditions": {
        "host": "def.mydomain.com"
      },
      "statusCode": 301
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*", "/js/*"]
  }
}

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