Blazor WASM（仅限客户端）- 如何向不同的 API 发出 HTTP 请求？答案

【问题标题】：Blazor WASM (Client Side Only) - How to make HTTP Request to different APIs?Blazor WASM（仅限客户端）- 如何向不同的 API 发出 HTTP 请求？
【发布时间】：2021-03-01 00:31:11
【问题描述】：

所以我来自 Xamarin 世界，试图构建一个 Blazor 应用程序。而且我正在努力理解为什么 Blazor 应用程序（仅限客户端）无法进行基本的 HTTP get 调用来说 google.com 或任何其他 http get/post 调用到不同的资源/url？

谁能帮我分析一下，我疯了吗？我将如何实现 maps.google.com 或其他我需要发出的 http 请求。

我确实注意到任何带有包的东西，例如 SendGrid 或 B2C 或 Cosmos Nuget 包似乎都可以正常工作......它们如何绕过不同的域名？

我能否在我的网络服务器上简单地说：（英文）- 允许向 google.com 和 someoneElsesApi.com 发出请求还是我必须联系谷歌并让他们允许我的 Blazor 应用拨打电话？

如果 Blazor Client Only PWA 应用程序无法连接或调用网络上的其他任何东西，那么它真的很挣扎......如果 Blazor 应用程序无法对其他服务进行任何 http 调用，这似乎毫无意义。

【问题讨论】：

您不能向不受您控制的服务器发出请求。如果浏览器可以通过代码调用世界上的任何服务器，那将是一个主要的安全问题。查找 CORS 及其重要性。
您应该能够使用 HttpClient 调用第三方公共 Web API 端点。 This documentation from Microsoft 展示了如何使用您自己的主机创建 HttpClient，但您应该能够将其用于任何第三方。到目前为止，您尝试过什么？
我确实阅读了 Cors，显然不足以让我理解为什么浏览器与我可以使用的任何其他应用程序如此不同。在控制台应用程序中，我可以在 google.com 上使用 HTTP 请求并获得响应……在 Blazor（或我猜是浏览器）中，这是一个巨大的安全问题……为什么会有差异？
正如 Andy 提到的，将 CORS 添加到我自己的 API 允许从我的 Blazor 应用程序访问...但我不能去要求其他 3rd 方 API 将我的域添加到他们的 CORS Lex - 我阅读了链接并看到“HttpClient and JSON helpers are also used to call third-party web API endpoints..”这一行。也许我看的不正确，但那段或文章中没有其他内容讨论第三方 API ......我认为该行只是一种注释应该遵循工作（想不出要测试的示例 api）？ HttpClient c = new HttpClient();等待 c.GetFromJsonAsync("Some-allow-annonymus-3rdPartyAPI-URL");
@John Blazor WASM 本身不会进行任何 HTTP 调用，浏览器会这样做。所有浏览器都被构建为拒绝连接到未通过 CORS 策略指定的任何端点。将 Xamarin Forms 之类的桌面应用程序与在浏览器中运行的 SPA（这就是 Blazor WASM）进行比较只会让您感到困惑。您应该将其与其他 SPA 框架进行比较，例如 React、Vue 或纯 JavaScript

标签： asp.net-core cors blazor webassembly .net-5

【解决方案1】：

好的，所以是的...我找到了一个公共开放 API 来测试一个请求，它确实可以在 Blazor WASM（仅限客户端）上工作。更具体地说，以下工作正常..

@inject HttpClient HttpClient ... string responsString = await HttpClient.GetStringAsync("https://rickandmortyapi.com/api/character/5");

我遇到的问题似乎令人困惑：

两者

Blazor WASM
Xamarin 表单应用程序都可以从 HTTP 客户端调用开放的公共 Web API。

但是…… 当我创建一个 ASP.NET 核心 API 并发布它允许在 azure 中匿名访问时，

Xamarin Forms 可以调用该 API
除非我在 Web API 中正确指定 CORS，否则 Blazor WASM 无法调用它

因此，由于我对 Blazor WASM 缺乏经验，我认为它无法做到这一点……而 Xamarin 可以。所以这变成了......我在 Azure + ASP.net Core Web API 中创建的 Web API 是怎么回事 - 只允许 Xamarin 应用程序调用它（没有 CORS 规范）......而 CORS 必须正确设置为Blazor WASM？

【讨论】：

比较 Xamarin 和 Blazor 没有帮助。 Xamarin Forms 不在浏览器上运行。 Blazor WASM 可以。真正发出 HTTP 请求并拒绝连接到其他 API 的是 浏览器。您配置 CORS 以告诉浏览器可以连接到其他 API。
“必须为 Blazor WASM 正确设置 CORS”，因为 CORS 是 JavaScript（浏览器）的一项安全功能。如果您使用 Blazor Server 应用程序，则不会有任何 CORS 问题。