获取“状态代码：400错误请求”当使用类型为“Content-Type：application / octet-stream”

Question

我尝试以Content-Type: application/octet-stream的形式向Microsoft Cognitive Services' Emotion API发送数据。

我通过调用canvas.toDataURL('image/jpeg', 0.1);从画布中获取图像的Base64字符串（我已尝试用1,0.5,0.2调用它，只是为了检查它是否有效以及停止给我错误）

然后使用该Base64字符串，我调用了EmotionService的getUserEmotion方法。

我按照this answer中提到的说明，使用Angular的HttpClient进行AJAX调用。这是我的服务的样子：

＆＃13;

＆＃13;

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class EmotionService {

  apiUrl: string = 'https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize';

  constructor(private http: HttpClient) {}

  getUserEmotion(userImageBlob) {
    let headers = new HttpHeaders();
    headers = headers.set('Ocp-Apim-Subscription-Key', 'my-api-key-here');
    headers = headers.set('Content-Type', 'application/octet-stream');
    return this.http.post(this.apiUrl, { "data": this.makeBlob(userImageBlob) }, { headers: headers });
  }

  makeBlob(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
      var parts = dataURL.split(',');
      var contentType = parts[0].split(':')[1];
      var raw = decodeURIComponent(parts[1]);
      return new Blob([raw], { type: contentType });
    }
    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;

    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], { type: contentType });
  }

}

＆＃13;

＆＃13;

＆＃13;

这是我的网络标签对于请求的外观：

Follwing是我的问题：

1. 在我回答的问题中，他们还指出我应该为我的AJAX调用设置processData:false选项。但我不确定如何使用Angular HttpClient来做到这一点。
2. 请求有效负载中的data字段也是空的。但是当我调试时，我从makeBlob方法获得了正确的Blob对象。为什么会这样？

Answer 1

我在这里做的很傻。这里的API Documentation of the Emotion API表示它需要数据作为二进制图像数据。

但我仍然把它当作JSON。我只是改变了getUserEmotion方法的实现。而不是

return this.http.post(this.apiUrl, { "data": this.makeBlob(userImageBlob) }, { headers: headers });

我用过这个

return this.http.post(this.apiUrl, this.makeBlob(userImageBlob), { headers: headers });

希望这可以帮助那些面临同样问题的人！