Failed to execute 'setRequestHeader' on 'XMLHttpRequest': Value is not a valid ByteString [closed]

Question

When I try to upload a base64 image inside my angular application, the http.post method throws an error:

Failed to execute 'setRequestHeader' on 'XMLHttpRequest': Value is not a valid ByteString.

This is what the code looks like:

let headers = new Headers();
      headers.append("Accept", 'application/json');
      headers.append("Content-Type", "application/json");
      headers.append('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/68.0' );

      let postData = {
        "AudometerCapture":this.abc,                          
        "Door1":this.abc,
        "Door2":this.abc,
       "Door3":this.abc,
        "Door4":this.abc,
       "TransactionID": 90
    }

      this.http.post('http://apiearningwheels.sharpnettechnology.com/api/DailyImageUpload/UploadDailyImages', JSON.stringify(postData), {headers: headers})
        .map(res => res.json())
        .subscribe(data => {
          console.log(data);
          this.showLongToast("result is :- " + res);
        });

i expect the output to be 'result is = ' but i get the error.

The request works correctly using Postman.

Answer 1

The error is thrown because there is a symbol for three dots (…) in the last header, which cannot be correctly converted to ByteString.

So you have to remove the line or change it like this:

headers.append('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/68.0' );

to

headers.append('User-Agent', 'Mozilla/5.0 (Windows NT 10.0;) Gecko/20100101 Firefox/68.0' );

I tested the headers, using https://codesandbox.io/s/angular, and it threw me an error on that line: Cannot convert string to ByteString because the character at index 30 has value 8230 which is greater than 255.