问托管在Azure应用服务上的具有REST API的Azure静态应用

EN

这里有几个选项，您需要自己选择一个。最后，不管API在哪里运行，它只是一个您想要从静态web应用程序连接到的API。因此，如果正确设置CORS，您可以将API发布到任何地方(只要它可以通过internet访问)，并从您的前端连接到它。

以下是一些需要考虑的事项：

CORS

跨域资源共享 (CORS)是一种基于HTTP头的机制，它允许服务器指示浏览器应允许从其自身以外的任何源(域、方案或端口)加载资源。CORS还依赖于一种机制，通过该机制，浏览器向托管跨域资源的服务器发出“预检”请求，以检查服务器是否允许实际的请求。在该印前检查中，浏览器发送指示HTTP方法的标头和将在实际请求中使用的标头。

更多信息：Cross-Origin Resource Sharing (CORS)

设置CORS，以便您的静态托管网站可以访问您在其他地方运行的API。当使用静态Web应用程序时，这是为您管理的。

静态网站托管(Azure存储)

您可以直接从通用V2或BlockBlobStorage帐户中的容器提供静态内容(HTML、CSS、JavaScript和图像文件)。

更多信息：Host a static website in Azure Storage

这是一个来自存储账户的静态网站托管，这与静态Web应用不同(如下所示)。在这种情况下，您在存储帐户中托管网站的静态资产。如果你需要证书，自定义域等等，你需要添加额外的Azure资源，比如CDN。当使用静态Web应用程序时，这是为您管理的。

静态Web应用程序

使用静态Web应用程序，静态资产与传统的web服务器分开，而是从分布在世界各地的点提供服务。由于文件在物理上更接近最终用户，因此此分发使提供文件的速度更快。此外，API端点使用无服务器体系结构进行托管，这样就不再需要完整的后端服务器。

更多信息：What is Azure Static Web Apps?

然而，你可以选择只使用静态资产- Azure静态Web应用的一部分，并让你的API在其他地方运行。

教程

就教程而言:你可能会发现这个很有趣：Host a RESTful API with CORS in Azure App Service

Azure应用程序服务提供了高度可扩展的、自我修补的虚拟主机服务。此外，App Service内置了对RESTful API跨域资源共享(CORS)的支持。本教程将介绍如何使用CORS支持将ASP.NET核心应用程序接口应用程序部署到应用程序服务。您可以使用命令行工具配置应用程序，并使用Git.

部署应用程序

看看这个https://stackoverflow.com/a/70675328/6727650

我在AngularJS应用程序中遇到了一个错误，虽然简单，但使用了指令。决议如下。

在存储库的根目录下创建一个staticwebapp.config.json文件，并添加以下配置：

{
  "globalHeaders": {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, OPTIONS"
  }
}

发布您的应用程序并重新测试。解决成功！下面是我的AngularJS是如何逐个项目的

​

​