无法在 Ionic 3 / Angular 5 中发送 HTTP POST 请求答案

【问题标题】：Can't send an HTTP POST request in Ionic 3 / Angular 5无法在 Ionic 3 / Angular 5 中发送 HTTP POST 请求
【发布时间】：2018-09-11 17:55:05
【问题描述】：

我正在尝试从我的 Ionic 3 (Angular 5) 应用向我的 REST api 发送一个发布请求，但我收到 HTTP 404（未找到） 或 HTTP 400（错误请求）。

当我使用 Postman 发送发布请求时，它是成功的。而且，我在 Ionic 3 应用程序中的 GET 请求成功运行。您可以在下面看到成功请求，它没有授权：

这是我的请求方法：

sendConfirmationCode() {
    let mybody = new FormData();
    mybody.append('msisdn', '1234567');

    let myheaders = new HttpHeaders({
      'Content-Type': 'application/json'
    });

    this.http.post('http://mydomain/methodname', mybody, {headers: myheaders})
    .subscribe(data => {
      console.log(JSON.stringify(data));
    }, error => {
      console.log(JSON.stringify(error));
    })
  }

带有标头我得到 HTTP 404（未找到）但没有 HTTP 400（错误请求）。因此，我尝试了使用和不使用标头的不同主体对象。这是我的用法，而不是 FormData 正文对象：

let mybody= new HttpParams();
mybody.append('msisdn', '1234567');
-----
let mybody= new URLSearchParams()
mybody.append('msisdn', '1234567');
-----
//SubscriberDataInput is my class for to use as input body model of api's method
let mybody = new SubscriberDataInput();
mybody.msisdn = '1234567';
-----
let mybody = JSON.stringify({ "msisdn": "1234567" });

并尝试了这些情况来发送标头而不是上面的标头：

let Options = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};
-----
let headers = { 'Content-Type': 'application/json' }

它们都没有成功。你能告诉正确的方法吗？

【问题讨论】：

这可能是一个愚蠢的问题，但由于您的标头出现 HTTP 404（未找到），http://mydomain/methodname/ 存在，并且准备在该地址处理发布数据，并且不需要元素引用？
所以您提到邮递员适用于您的情况，对吗？你能展示你如何在邮递员中配置你的请求吗？这个问题确实是客户端形成的请求无效，但要了解究竟是什么 - 你需要分享成功案例（邮递员）
@SergeyRudenko 我添加了截图，你可以在上面看到。
还有一个问题 - 你在使用 Angular 5 的 http 模块吗？正确的？ @angular/common/http?
@SergeyRudenko 是的，来自 '@angular/common/http' 的 HttpClient。

标签： javascript typescript post ionic3 angular5

【解决方案1】：

我找到了解决方案。问题是我的 RESTful api 阻止了 ajax 发布请求。这是与 Cors 相关的 Asp.Net WebApi 2 中的解决方案：

在Startup.cs的Startup类中添加一个常量：

private const string DefaultCorsPolicyName = "localhost";

将 Cors 添加到 Startup 类的 ConfigureServices 方法中：

    services.AddCors(options =>
    {
        options.AddPolicy(DefaultCorsPolicyName, builder =>
        {        
              builder
              .AllowAnyOrigin() 
              .AllowAnyHeader()
              .AllowAnyMethod();
        });
    });

在Startup 类的Configure 方法中启用 Cors：

app.UseCors(DefaultCorsPolicyName); //Enable CORS!

在 web.config 中删除 first 自定义标头：

<add name="Access-Control-Allow-Origin" value="*"/>

【讨论】：