报头问题(Angular)：服务器在同一请求中返回401和200？

Question

我有一个小的应用程序请求一个API的服务。我将凭证设置如下：

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

但是日志是“奇怪的”：

​

先是401，然后是200，API没有返回建议返回的内容( png图像)。在Edge上，当我点击submit时，浏览器会询问令牌。我输入凭据，然后服务工作(chrome类似)...Yesterday一切正常，但现在我有这个问题。是API吗？标头设置错误了吗？我有一个用于测试here的现场演示。谢谢你的帮助！

根据@Mudassar的建议进行编辑

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

但我还是能拿到401...

Answer 1

这可能是因为未设置CORS

Access-Control-Allow-Headers: Authorization

进一步设置此设置应确保正常工作

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

编辑:开始觉得问题可能与服务器端有关，因此建议在服务器端添加以公开Authorization头。"Access-Control-Expose-Headers" : "Authorization"