Header-Problem (Angular): Server antwortet mit 401 und 200 in der gleichen Anfrage?

Question

Ich habe diese kleine App, die einen Dienst für eine API fragt. Ich habe die Anmeldeinformationen wie folgt festgelegt:

this.http.get<Response>(url, { 
     headers: new HttpHeaders().set('Authorization', 'Basic ' 
     + btoa('C7YHKF91RAABYXNK :JMGYBMAT1X18KA2W ')) 
     }) 
     .subscribe(data => { 
      Response = data['results']; 

Aber die Protokolle sind „seltsam“:

Es gibt eine 401 und dann eine 200 und die API-Rückkehr ist nicht, was suposed wurde zurückzukehren (eine png Bild). Wenn ich auf "Edge" klicke, fragt der Browser nach dem Token. Ich gebe die Zugangsdaten ein und dann funktioniert der Dienst (Chrome ist ähnlich) ... Gestern hat alles gut funktioniert, aber jetzt habe ich dieses Problem. Ist es die API? Sind die Header falsch eingerichtet? Ich habe eine Live-Demo zum Testen here. Danke für die Hilfe!

EDIT wie @Mudassar vorgeschlagen

onSubmit({ valid }: { valid: boolean }, f: any) { 

    if {// 
    } 
    else { 

     let color = encodeURIComponent(this.params.handwriting_color); 
     const url = 
     `https://api.handwriting.io/render/png?handwriting_id=${this.params.handwriting_id}&text=${this.params.text}&handwriting_size=${this.params.handwriting_size}&handwriting_color=${color}`; 

     //SET HEADERS 
     let headers= new HttpHeaders(); 
     headers.append('Authorization', 'Basic ' + btoa('C7YHKF91RAABYXNK :JMGYBMAT1X18KA2W ')) 
headers.append("Access-Control-Allow-Origin", "new[] { (string)context.Request.Headers['Origin'] }"); 
     headers.append("Access-Control-Allow-Headers", "new[] { 'Origin, X-Requested-With, Content-Type, Accept, Authorization' }"); 
     headers.append("Access-Control-Allow-Methods", "new[] { 'GET, POST, PUT, DELETE, OPTIONS' }"); 
     headers.append("Access-Control-Allow-Credentials", "new[] { 'true' }"); 




     //REQUEST 
     this.http.get<Response>(url, { 
     headers: headers 
     }) 
     .subscribe(data => { 
      Response = data['results']; 

     }, (err: HttpErrorResponse) => { 
      if (err.error instanceof Error) { 
      console.log('An error occurred:', err.error.message); 
      } else { 
      console.log(`Backend returned code ${err.status}, body was: ${err.error}`); 
      console.log(Response); 
      } 
     }); 
    } 

Aber ich bekomme immer noch die 401 ...

Answer 1

Dies könnte darauf zurückzuführen sein, nicht die CORS Einstellung

Access-Control-Allow-Headers: Authorization 

weiter Diese Einstellung sollte Sicherstellen, dass das Gerät ordnungsgemäß funktioniert

headers.append("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] }); 
headers.append("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" }); 
headers.append("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" }); 
headers.append("Access-Control-Allow-Credentials", new[] { "true" }); 

EDIT: Das Gefühl zu haben, dass das Problem mit der Server-Seite zu tun haben könnte, schlägt daher vor, auf der Server-Seite hinzuzufügen, um den Autorisierungs-Header verfügbar zu machen. "Access-Control-Expose-Headers" : "Authorization"