Angular httpClient - POST成功，未发送参数答案

【问题标题】：Angular httpClient - POST successful, no parameters sentAngular httpClient - POST成功，未发送参数
【发布时间】：2019-05-23 03:37:05
【问题描述】：

我正在尝试在我的 Ionic4 应用程序中做一些非常基本的事情 - 将数据发布到 Asp.Net Web API 2 界面。请求成功，但是服务器没有收到数据。

import { HttpClient } from '@angular/common/http';

someAction(assetId: number) {
let asset = new FormData();
asset.append("assetId", assetId.toString());
asset.append("UserId", "1");

return this.httpClient.post(this.url + "SomeAction", asset, { headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' } }).toPromise();
    }

在服务器上（C#）：

[HttpPost]
[Route("Service/SomeAction")]
public HttpResponseMessage SomeAction(AccessData asset)
{
  return new HttpResponseMessage(_service.LogAsset(asset));
}

服务器上的asset 对象已实例化，但不包含客户端发送的值。

此外，删除/更改发送的标头会导致请求完全失败。

编辑： 删除标题会导致错误 404，并且在控制台中也有这个：

从源“http://localhost”访问“http://server”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应不通过访问控制检查：它没有 HTTP ok 状态。

将标头更改为“multipart/form-data”会导致错误 415 - 不支持的媒体类型

编辑#2： 这适用于 Postman 和 HTTPBot (iPhone)，但不适用于我的 Ionic 应用程序

【问题讨论】：

没有任何其他详细信息，您的 .NET WebAPI 是如何设置的。很确定您的 API 需要 JSON 内容类型而不是 x-www-form-urlencoded。您可以尝试将[FromBody] 属性添加到您的AccessData 参数。
@penleychan 我也怀疑这一点，但是更改/删除该标头会使请求失败 - 它甚至无法到达服务器。
您能否向我们展示当您尝试在没有该内容类型标头的情况下进行 POST 时出现的错误？
@favdev - 用更多信息编辑了我的问题
您在访问远程服务器吗？

标签： angular ionic-framework ionic4 angular-httpclient

【解决方案1】：

正如您删除 Content-Type 标头时的错误所述：

从源“http://localhost”访问“http://server”处的 XMLHttpRequest 已被 CORS 策略阻止

【讨论】：

内容类型如何影响 CORS？

【解决方案2】：

我改用Ionic native http plugin 作为解决方案。不过，这不是我的问题的结束。请参阅此question 了解更多信息。

【讨论】：

老实说，我建议您继续尝试使用 Angular Http 客户端。它更快，更强大。一旦你弄清楚了问题，无论是在服务器端还是客户端，一切都会更顺利。
@StephenRomero 我读到本机插件可以防止浏览器 CORS 问题，我认为这对我来说是一个好处。两个插件的功能、速度等是否有很好的比较可以帮助我选择？
从我的研究经验来看，Angular 插件的效率更高。如果你打算在你的 Ionic 应用程序中使用 Angular，从长远来看它会更有益。我使用 PHP 作为我的后端，一开始遇到了 CORS 标头问题，但是一旦我解决了问题，一切都运行良好。 Angular http 的功能也比 Ionic 多得多。

【解决方案3】：

更新：我最终通过启用 CORS 解决了这个问题。我在 web.config 中启用了 CORS，并期望它就足够了，但事实证明我实际上需要安装 Microsoft.AspNet.WebApi.Cors 包并将 [EnableCors] 属性添加到我的 post 方法中。

【讨论】：