角度 2 http 帖子不起作用答案

【问题标题】：angular 2 http post not working角度 2 http 帖子不起作用
【发布时间】：2017-11-11 11:42:14
【问题描述】：

这是我的代码：

const dummydata = {
  param1: 72766,
  param2: 'ELS'
}

var foo = JSON.stringify(dummydata)

let headers = new Headers();
headers.append('content-type', 'application/json');

this.http.post(url, foo, { headers: headers }).map(res => res.json()).subscribe(
  () => { alert('Success'); }
);

由于某种原因，form-datain Request Payload 中没有数据进入服务器，并且类型正在转换为 OPTIONS 而不是 POST 另一方面，如果我删除headers，那么form-data 会继续，但会出现另一个错误：

415 Unsupported Media Type

更新：JQuery Ajax 正在工作

UPDATE2：已经试过了：

let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

【问题讨论】：

当你发出一个 HTTP 请求时，Angular 总是会做一个 OPTIONS 来查看它是否可以到达端点。如果您的选项有误，那么您的 POST 将不起作用。在这里，这是一个服务器问题，不接受媒体类型。因此，要么更改数据，要么更改服务器处理数据的方式。
@trichetriche 我尝试以不同的方式更改数据。今天几乎一整天都在做这件事。到目前为止没有运气。问题是如果我尝试 jQuery Ajax，它可以工作
@trichetriche 不正确，OPTIONS 请求是由浏览器而不是 Angular 发出的。它们通常是在用户执行跨域请求时生成的，请查看此以获取更多信息：stackoverflow.com/questions/27915191/…
我的错误，但想法就在那里。感谢您的提醒

标签： angular http rxjs5

【解决方案1】：

你可以试试这个：

const dummydata = {
 param1: 72766,
 param2: 'ELS'
}

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


let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

 this.http.post(url, dummydata, options).map(res=>res.json()).subscribe(
        () => { alert('Success'); }
    );

【讨论】：

相同。该类型被转换为“OPTIONS”并且请求有效负载不包含任何内容。所以服务器没有响应
看起来您可能有一些cors 问题，请确保您尝试访问的 URL 处理它
如果是这样，你可以使用插件：chrome.google.com/webstore/detail/allow-control-allow-origi/…
@KetanAkbari 谢谢你的作品。但是为什么它使用 JQuery ajax 而不是使用 angular 2 http。另一件事是这可能不是可行的解决方案
@Ajax 是的，这可能就是问题所在。关于为什么它使用 JQuery ajax 而不是使用 angular 2 http 的任何想法

【解决方案2】：

Angular 的发布请求方式。

const dummydata= {param1:72766,
        param2:'ELS'}

    var foo=    JSON.stringify(dummydata);

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });


 this.http.post(url, foo,{headers: headers} ).map(res=>res.json()).subscribe(
            () => { alert('Success'); }
        );

欲了解更多信息，请查看此链接https://angular.io/docs/ts/latest/guide/server-communication.html

【讨论】：

【解决方案3】：

您必须检查您的服务器是否支持 OPTIONS 请求，如果不支持，则需要在 htaccess 文件中添加这些行

Header 添加 Access-Control-Allow-Headers "origin, x-requested-with, content-type" 标头添加 Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

【讨论】：

htaccess 仅由 apache 使用（据我所知，它用于旧版本）。因此，尽管原则上是正确的，但您的答案是不充分的。

【解决方案4】：

应该是CORS的问题。
当您从浏览器发出CORS 请求（调用不同的URL 然后是javascript 文件的主机）时，它会在发出任何其他请求之前自动发出OPTIONS 请求。如果响应合适，它将发出GET、POST、DELETE、PUT 请求，如代码所示。
示例：

您想向myserver.com/add-book/ 发出POST 请求
浏览器将向myserver.com/add-book/ 发出OPTIONS 请求
如果对 OPTIONS 的响应包含请求的标头等（例如 Allowed-Methods 标头）POST 将执行请求

因此，您需要在服务器和 REST API 上启用 OPTIONS 请求。如果您使用 JWT 身份验证，则需要将 OPTIONS 请求标记为安全 - JWT 不需要位于请求的标头中。
More 关于OPTIONS 请求

【讨论】：

【解决方案5】：

我找到了一种更好的方法来解决这个 CORS 问题，方法是使用 Angular CLI 为 API 调用配置代理：

我创建了一个proxy.conf.json：

{
  "/API": {
    "target": "http://myserver.com",
    "secure": false
  },
  "/API2":{
    "target": "http://myserver.com",
    "secure": false
  }
}

然后在package.json下scripts：

"start": "ng serve --proxy-config proxy.conf.json",

现在调用 API 只需提供像“/API/getData”这样的 URL，CLI 会自动重定向到 http://myserver.com/API/getData

【讨论】：