Angular 2 http发布参数和正文 [英] Angular 2 http post params and body

问题描述

我正在尝试从我的角度应用程序进行api调用.我想做的是使用命令参数将发布请求发送到api.我已经完成了许多服务器端测试以及通过了传出请求，并且$_POST或body数据都不存在.因此，我很确定问题出在这段代码之内.

I'm trying to do an api call from my angular app. What I want to do is send a post request to the api with a command param. I have done a lot of server side testing as well as going through the outgoing request, and the $_POST nor body data is never there. I am therefore pretty sure that the problem lays within this piece of code.

public post(cmd: string, data: object): Observable<any> {

    const params = new URLSearchParams();
    params.set('cmd', cmd);

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      params: params,
      body: data,
      withCredentials: false
    });

    console.log('Options: ' + JSON.stringify(options));

    return this.http.post('http://t2w.dev/index.php', data, options)
      .map(this.handleData)
      .catch(this.handleError);
  }

我尝试了许多不同的JSON结构，如data，但这是我要发送的内容的核心:

I have tried many different JSON structures as data but this is the core of what I am trying to send:

{
  "Username": "No thanks",
  "Password": "Donno"
}

this.handleData和this.handleError是一种将数据和错误作为参数的方法，并且只返回我想要的内容.

this.handleData and this.handleError is a method taking data and error as arguments, and returns just what I want.

该api设置为记录通过$_POST传入的所有内容，当从我的有角度应用程序以外的任何地方运行请求时，此方法均能正常运行.到目前为止，我所做的事情:

The api is setup to log anything coming through $_POST which works fine when running request from anywhere but my angular app. What I have done so far:

1. 传递原始查询而不是URLSearchParams.
2. 不带正文地传递请求.
3. 传递RequestOptions中的所有值.
4. 将参数作为字符串传递.
5. 传递身体作为参数.
6. 将正文作为JSON.stringify({ 用户名":不，谢谢"， 密码":"Donno" }

1. Passing raw query instead of URLSearchParams.
2. Passing the request without body.
3. Passing all values in RequestOptions.
4. Passing params as string.
5. Passing body as params.
6. Passing body as JSON.stringify({ "Username": "No thanks", "Password": "Donno" }

RequestOptions

的控制台输出

选项:{方法":空，标题":{内容类型":[应用程序/json"]，接受":[应用程序/json"]，"X-CLIENT-ID" :["380954038"]，"X-CLIENT-SECRET":["5BgqRO9BMZ4iocAXYjjnCjnO7fHGN59WP8BTRZ5f"]}，"body":"{}"，"url":null，"params":{"rawParams":"，"queryEncoder:{}，" paramsMap:{}}，" withCredentials:false，" responseType:1} VM8529:1 XHR已完成加载:POST" http://t2w.dev/index.php ".

Console output of RequestOptions

Options: {"method":null,"headers":{"Content-Type":["application/json"],"Accept":["application/json"],"X-CLIENT-ID":["380954038"],"X-CLIENT-SECRET":["5BgqRO9BMZ4iocAXYjjnCjnO7fHGN59WP8BTRZ5f"]},"body":"{}","url":null,"params":{"rawParams":"","queryEncoder":{},"paramsMap":{}},"withCredentials":false,"responseType":1} VM8529:1 XHR finished loading: POST "http://t2w.dev/index.php".

有人知道为什么数据从不发送吗?

Anyone have any clue why the data never gets sent?

推荐答案

它有效，谢谢@trichetriche.问题出在我的RequestOptions中，显然，使用帖子时您无法将params或body传递给RequestOptions.删除其中之一会给我一个错误，同时删除它们并能正常工作.解决我的问题仍然没有最终解决方案，但是现在我可以解决一些问题.最终的工作代码.

And it works, thanks @trichetriche. The problem was in my RequestOptions, apparently, you can not pass params or body to the RequestOptions while using the post. Removing one of them gives me an error, removing both and it works. Still no final solution to my problem, but I now have something to work with. Final working code.

public post(cmd: string, data: string): Observable<any> {

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      withCredentials: false
    });

    console.log('Options: ' + JSON.stringify(options));

    return this.http.post(this.BASE_URL, JSON.stringify({
      cmd: cmd,
      data: data}), options)
      .map(this.handleData)
      .catch(this.handleError);
  }

这篇关于Angular 2 http发布参数和正文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！