如何以角度发送卷曲请求

Question

I have the following curl request using postman, and i want to create an http request in angular that does the same thing

curl --location --request POST 'http://api.deepai.org/api/fast-style-transfer' \
--header 'api-key: myKey' \
--form 'content="https://www.dmarge.com/cdn-cgi/image/width=1200,quality=85,fit=scale-down,format=auto/https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg"' \
--form 'style="https://images.fineartamerica.com/images/artworkimages/mediumlarge/3/starry-night-print-by-vincent-van-gogh-vincent-van-gogh.jpg"'

This is what i have so far but i am getting errors

constructor(private http: HttpClient) {}

ngOnInit() {}

async style(){
    const url = 'http://api.deepai.org/api/fast-style-transfer';
    const headers = new HttpHeaders()
      .set('api-key', 'myKey');

    const resp = await this.http.post(url, { content: 'https://www.dmarge.com/cdn-cgi/image/width=1200,quality=85,fit=scale-down,format=auto/https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg',
    style: 'https://images.fineartamerica.com/images/artworkimages/mediumlarge/3/starry-night-print-by-vincent-van-gogh-vincent-van-gogh.jpg'}, {
      headers
    }).toPromise().then();

    console.log(resp);
  }

The errors:

XHRPOSThttp://api.deepai.org/api/fast-style-transfer [HTTP/1.1 400 Bad Request 1993ms]

GEThttp://localhost:8100/undefined [HTTP/1.1 404 Not Found 28ms]

ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":400,"statusText":"Bad Request","url":"http://api.deepai.org/api/fast-style-transfer","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://api.deepai.org/api/fast-style-transfer : 400 Bad Request","error":{"err":"error processing given inputs from request"}}

Answer 1

The POST request body is expected to be in JSON, therefore try to build a FormData object as shown in the following code snippet.

Also, set the headers to accept data as JSON.

async style() {
  const url = 'http://api.deepai.org/api/fast-style-transfer';
  const headers = new HttpHeaders()
    .set('accept', 'application/json')
    .set('api-key', 'myKey');

  let requestBody = new FormData();

  requestBody.append('content', 'https://www.dmarge.com/cdn-cgi/image/width=1200,quality=85,fit=scale-down,format=auto/https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg');
  requestBody.append('style', 'https://images.fineartamerica.com/images/artworkimages/mediumlarge/3/starry-night-print-by-vincent-van-gogh-vincent-van-gogh.jpg');

  const resp = await this.http.post(url, requestBody, {
    headers: headers
  }).toPromise().then();

  console.log(resp);
}