angular 15 TypeError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': String contains non ISO-8859-1 code point

Question

Angular 15

import { HttpClient,HttpHeaders } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Buffer } from 'buffer';
import { Observable } from "rxjs";

@Injectable({
    providedIn:'root'
})
export class InfoService{
    private baseUrl='http://aa.localhost.com:1616/abc/';
    constructor(private _http:HttpClient){}

    
    getInfor():Observable<any>{
        let headers = new HttpHeaders()
        .set('Content-Type','application/json')
        .set('Access-Control-Allow-Origin','*')
        .set('Authorization','Basic '+ Buffer.from('abc:abc123','base64'));
        
        console.log(headers.get('Authorization')); # shows Basic ��-�x-z�b�v
        
        return this._http.get(`${this.baseUrl+"test?id=101"}`,{
            'headers':headers
        });
    }


}

get ERROR TypeError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': String contains non ISO-8859-1 code point.

bota is deprecated

I do not find polyfills.ts on Angular 15, so I created it by my own and added

(window as any).global = window;

window.Buffer = window.Buffer || require('buffer').Buffer;

it's not working.

also I installed Buffer package

and. added script to index.html, still not working

  <script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
      env: { DEBUG: undefined },
      version: []
    };
  </script>