如何将带有前端 SPA 的 Azure CDN 和带有 .Net Core WebApi 的 Azure WebApp 配置到相同的自定义域？答案

【问题标题】：How to configure Azure CDN with front-end SPA and Azure WebApp with .Net Core WebApi to same custom domain?如何将带有前端 SPA 的 Azure CDN 和带有 .Net Core WebApi 的 Azure WebApp 配置到相同的自定义域？
【发布时间】：2019-08-26 23:12:40
【问题描述】：

我想将 https://example.com 作为我已设置的 Azure CDN 的自定义域，并将 https://example.com/api 作为其余 api 端点以捕获从我的 SPA 到后端 .Net Core Web 的所有调用API 提供数据。

如何在应用服务上设置自定义域以提供 https://example.com/api 并为 Azure CDN 使用相同的自定义域来提供所有前端 SPA 网页？

现在，我仅为应用服务配置了自定义域，但我想将前端 SPA 移动到 Azure CDN，以便为 Web API 释放尽可能多的资源。

提前谢谢你，任何方向将不胜感激。

【问题讨论】：

您好，如果您想为您的 Azure CDN 添加自定义域，请参考：docs.microsoft.com/en-us/azure/cdn/…
您好，感谢您的回复，但我希望我的 Azure CDN 和应用服务使用相同的自定义域，这仅显示如何将自定义域添加到 Azure CDN
欢迎！据我所知，不可能将一个域分配给不同的服务。那么你在这里解决 CORS 问题吗？如果是这样，这个文档可能对你有帮助：docs.microsoft.com/en-us/azure/app-service/…
您应该尝试使用子域解决此问题：api.example.com 用于您的 api，example.com 用于您的水疗中心，因为它将是您的用户可见的域。

标签： c# azure vue.js .net-core azure-cdn

【解决方案1】：

您可以引入另一个资源，例如 Azure Front Door，它可以充当代理并将 CDN 和您的应用服务隐藏在单个域后面。

Front Door 允许您配置路由规则，以便 /api 的请求被路由到应用服务，而对静态资产的请求被路由到 CDN。

然后您可以将您的 DNS CNAME 设置为 Front Door，所有请求都将在那里发送，而不是直接发送到 CDN 或您的应用服务。

这使您无需担心 CORS，因为从外部角度来看，所有内容都来自同一个域。

它还有其他好处，例如允许您配置请求限制、SSL 终止和全局负载平衡等等。

【讨论】：

哇，我从来没有注意到这项服务，谢谢！通过 Azure Front Door 后面的 CDN 提供的前端 SPA 文件是否计入 Front Door 出站数据传输的账单？只是因为我对定价有点困惑

【解决方案2】：

不幸的是，不可能在两个不同的公共服务中添加相同的自定义域，因为只有当您需要将 custom domains 添加到 CDN 端点并且该名称上没有其他记录时，才能使用 CNAME 记录通过 CNAME 或 A DNS 记录的应用服务。查看 CNAME 记录wiki。

在这种情况下，您可以通过this tutorial 之后的CNAME DNS 记录将自定义域添加到您的 Azure CDN 端点，但您需要创建像 subdomain.example.com 这样的子域，而不是根域 example.com，然后将子域添加到 Azure CDN 端点的custom domains。

【讨论】：