使用 JSON 正文在 Angular 2 中发出 POST 请求答案

【问题标题】：Making a POST request in Angular 2 with JSON body使用 JSON 正文在 Angular 2 中发出 POST 请求
【发布时间】：2016-02-23 10:58:19
【问题描述】：

我正在使用 POSTMAN 发出一些 POST 请求，如下所示：

这是使用 POSTMAN，它工作得很好。以下也是来自 POSTMAN

POST /supervisor/stop/process HTTP/1.1
Host: bento
Content-Type: application/json
Cache-Control: no-cache
Postman-Token: 66b05631-8b4e-473a-9d3f-deaa544ecac6

{
"ip" : "192.168.1.115",
"port" : "9001",
"process" : "public_video_convert:video_convert_01"
}

我使用 Angular 2 尝试了同样的事情，如下所示：

let url = "http://bento/supervisor/stop/process";
        let data = {
            "ip": "192.168.1.115",
            "port": "9001",
            "process": "public_video_convert:video_convert_01"
        }
        let body = JSON.stringify(data);
        let head = new Headers({
            'Content-Type': 'application/json'
        });

        this.http.post(url, body, {headers : head})
            .map(res =>  res.json())
            .subscribe(
                data => {console.log(data);},
                err => console.log(err),
                () => console.log('Fetching complete for Server Metrics')
            );

当我运行它时，我得到一个405 Method Not Allowed

请求的详细信息以及来自开发工具的响应如下：

我不知道如何处理。

【问题讨论】：

我认为PreFlight 请求失败。你控制服务器吗？ HTTP OPTIONS reqyests 可能没有在那里启用。

标签： json rest http angular

【解决方案1】：

由于某种原因，OPTIONS 请求未得到处理。我使用了以下工具：

https://github.com/jdesrosiers/silex-cors-provider

现在可以正常使用了。

【讨论】：

【解决方案2】：

简答

您从服务器获取 405，因为它不知道如何处理“OPTIONS”请求（因此出现“不允许的方法”响应）。

现在详细介绍

这是一个从浏览器发送的“预检”请求，如果您向不同的域发送“不简单”请求（在这种情况下，您的网页由 evil.com 托管并尝试发送 xhr到便当）。对于您的示例，使您的请求“不简单”的是标题“Content-type”：“application/json”。

当您的网络应用发出跨域请求时会发生这种情况。一般来说，有两种情况：

您正在发送一个“简单”请求，在这种情况下浏览器直接发送它（使用 Origin 标头），或者您正在发送一个“不简单”请求，在这种情况下浏览器发出预检请求(OPTIONS) 首先向服务器确认来源在“Access-Control-Allow-Origin”中列出，然后发出实际请求。

更多关于跨域资源共享的详情：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

【讨论】：

【解决方案3】：

Angulars Http 目前只支持文本。有计划支持其他体型https://github.com/angular/http/issues/75

【讨论】：

【解决方案4】：

我认为您忘记导入 Headers 类：

import {Http,Headers} from 'angular2/http';

在这种情况下，您的自定义标头不会添加到请求中。我看不到 Content-Type 标头进入请求的详细信息以及您提供的开发工具的响应。此标头应根据您提供的代码在请求中发送（导入除外）。

服务器似乎不支持没有 JSON 内容类型的 POST 方法。这就是您收到 405 错误的原因...

【讨论】：