如何为Azure静态Web应用配置自定义永久域名？

1. 完成自定义域名的DNS验证绑定 #

由于使用公司自有DNS系统，跳过Azure影子DNS选项，通过DNS记录验证完成域名绑定：

• 登录Azure门户，打开你的Static Web Apps资源，进入「自定义域名」页面，点击「添加」
• 输入目标自定义域名 myapp.mycompany.com，选择「DNS记录验证」方式
• 根据Azure提供的验证参数，在公司自有DNS系统中添加对应的TXT记录（用于证明域名所有权）
• 等待DNS解析生效（通常5-15分钟），完成域名绑定流程

2. 配置服务器端重写规则锁定域名 #

使用Static Web Apps的路由规则，将原随机域名的请求服务器端重写到自定义域名（区别于重定向，用户地址栏不会显示原域名）：
在前端项目根目录的 staticwebapp.config.json 中添加以下规则：

{
  "routes": [
    {
      "route": "/*",
      "rewrite": "/",
      "conditions": {
        "host": "thankful-salmon-01110a022.9.azurestaticapps.net"
      }
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

该规则会将所有访问原随机域名的请求，在服务器端直接映射到自定义域名对应的内容，用户全程看到的都是自定义域名。

3. 修正Angular应用的路径与API配置 #

避免Angular生成带原域名的链接：

• 在 angular.json 的 build 配置中，确保 baseHref 设置为根路径：

"build": {
  "options": {
    "baseHref": "/",
    // 其他配置项
  }
}

• 前端调用后端API时，使用相对路径或自定义域名的API地址，避免硬编码原随机域名。例如在 environment.prod.ts 中：

export const environment = {
  production: true,
  apiUrl: '/api' // 依赖Static Web Apps的API路由转发，或直接写https://myapp.mycompany.com/api
};

4. 配置后端API的域名访问限制 #

确保ASP.NET Core API只接受来自自定义域名的请求：

• 在 Program.cs 中配置CORS策略：

builder.Services.AddCors(options =>
{
    options.AddPolicy("CustomDomainOnly", policy =>
    {
        policy.WithOrigins("https://myapp.mycompany.com")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

app.UseCors("CustomDomainOnly");

• 可额外添加中间件验证请求的Host头，拒绝来自原随机域名的请求，进一步强化访问控制。

5. 完成用户引导与资源更新 #

• 通知所有用户使用自定义域名 https://myapp.mycompany.com 访问应用
• 更新内部文档、书签、共享链接中的地址，替换原随机URL

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