Obtener el `Código de estado: 400 Solicitud incorrecta` al llamar a la API de emoción de Microsoft Azure con datos del tipo` Tipo de contenido: aplicación / flujo de octetos`

Estoy tratando de enviar datos aAPI Emotion de los Servicios Cognitivos de Microsoft, en forma deContent-Type: application/octet-stream.

Estoy obteniendo la cadena Base64 de una imagen de un lienzo llamandocanvas.toDataURL('image/jpeg', 0.1);(Intenté llamarlo con 1, 0.5, 0.2 también, solo para verificar si funciona y deja de darme errores)

Luego, con esa cadena Base64, llamo al servicio EmotionServicegetUserEmotion método.

Seguí las instrucciones mencionadas enesta respuesta, para hacer una llamada AJAX utilizando HttpClient de Angular. Así es como se ve mi servicio:

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

}

Así es como se ve mi pestaña de red para la solicitud:

Follwing son las preguntas que tengo:

En la respuesta SO que sigo, también especificaron que debería establecer elprocessData:false opción para mi llamada AJAX. Pero no estoy seguro de cómo hacerlo usando Angular'sHttpClient.losdata El campo en la carga útil de la solicitud también está vacío. Pero cuando depuré, estaba obteniendo el Blob Object apropiado delmakeBlob método. ¿Por qué está pasando eso?

Respuestas a la pregunta(1)

Su respuesta a la pregunta