角形2，http桩边和体

Question

我正在尝试从我的角度应用程序中执行API调用。我想做的是用命令param向API发送post请求。我已经做了很多服务器端测试，也通过了传出请求，而且$_POST和body数据从来没有。因此，我确信问题就在这段代码中。

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，但这是我试图发送的核心：

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

this.handleData和this.handleError是一种以数据和错误作为参数的方法，并返回我想要的结果。

API是用来记录通过$_POST的任何东西，在运行除我的角度应用程序以外的任何地方的请求时，它都能很好地工作。我到目前为止所做的事：

1. 传递原始查询而不是URLSearchParams。
2. 不带身体地传递请求。
3. 传递RequestOptions中的所有值。
4. 以字符串的形式传递平行线。
5. 把身体当作平底物。
6. 通过体作为JSON.stringify({ "Username": "No thanks", "Password": "Donno" }

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".

有没有人知道为什么这些数据从来没有被发送过？

Answer 1

它很管用，谢谢你@trichetriche。问题是在我的RequestOptions中，显然，在使用post时，不能将params或body传递给RequestOptions。删除其中的一个给我一个错误，删除两者，这是有效的。对我的问题仍然没有最终的解决办法，但我现在有一些事情要做。最后的工作代码。

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);
  }

Answer 2

http.post的第二个参数是消息的主体，即有效载荷，而不是url搜索参数。在该参数中传递data。

来自文献资料

post(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response

    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,
          withCredentials: false
        });

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

        return this.http.post(this.BASE_URL, data, options)
          .map(this.handleData)
          .catch(this.handleError);
      }

编辑

您还应该查看第一个参数(BASE_URL)。它必须包含要访问的完整url (减号查询字符串)。我提到由于您给它的名称，我只能猜测当前的价值是什么(也许只是域？)。

此外，也不需要在http中发送的数据/有效负载上调用JSON.stringify。

如果仍然无法到达终点，请查看开发控制台中浏览器的网络活动，以查看正在发送的内容。然后，您可以通过正确的标题和正文进一步确定是否调用了正确的终结点。如果这似乎是正确的，然后使用邮递员或Fiddler或类似的东西，看看你是否能达到你的端点那样(角度外)。

Answer 3

让我们说我们的后端是这样的：

public async Task<IActionResult> Post([FromBody] IList<UserRol> roles, string notes) {
}

我们有这样一个HttpService：

    post<T>(url: string, body: any, headers?: HttpHeaders, params?: HttpParams): Observable<T> {
        return this.http.post<T>(url, body, { headers: headers, params});
    }

下面是如何将主体和注释作为参数传递: //如何调用它

const headers: HttpHeaders = new HttpHeaders({
    'Authorization': `Bearer XXXXXXXXXXXXXXXXXXXXXXXXXXX`
});

const bodyData = this.getBodyData(); // get whatever we want to send as body

let params: HttpParams = new HttpParams();
params = params.set('notes', 'Some notes to send');

this.httpService.post<any>(url, bodyData, headers, params);

它对我有效(使用角7^)，我希望对某人有用。