如何将授权头添加到Angular超文本传输协议请求？

Question

这是我的第一篇文章。

我刚刚开始学习围棋和Angular，我正试图将角应用程序连接到围棋api。这两篇文章我都写过了，我一直在寻找问题的根源。我认为这是一个CORS问题，但是如果我不在角超文本传输协议请求中包含标题代码行，它就可以正常工作。在这一点上，我只是想添加标题。授权代码尚未实现。

这两个应用程序都在本地运行，Go应用程序位于端口5000，Angular应用程序位于端口4200

不起作用的角超文本传输协议请求：

this.http.get<ProjectedBalance>(requestUrl, {headers: new HttpHeaders().set('Authorization', 'my-auth-token')})
    .subscribe(data => {
     this.projBalance = data.projBalance;
   }

有效的角度http请求：

this.http.get<ProjectedBalance>(requestUrl)
    .subscribe(data => {
     this.projBalance = data.projBalance;
   }

我得到了这个错误：

对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。起源'http://localhost:4200因此，不允许访问。响应的HTTP状态代码为403

我在我的围棋代码中使用了大猩猩/mux和大猩猩/处理程序

router := mux.NewRouter()
router.HandleFunc("/home/{endDate}", GetProjBalance).Methods("GET", "OPTIONS")
headersOk := handlers.AllowedHeaders([]string{"X-Requested-With, Content-Type, Authorization"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})
//start server on port
log.Fatal(http.ListenAndServe(":5000", handlers.CORS(originsOk, headersOk, methodsOk)(router)))

Chrome开发工具的标题

Request URL:http://localhost:5000/home/2020-12-21
Request Method:OPTIONS
Status Code:403 Forbidden
Remote Address:[::1]:5000
Referrer Policy:no-referrer-when-downgrade

Response Headers
view source
Content-Length:0
Content-Type:text/plain; charset=utf-8
Date:Mon, 20 Nov 2017 21:39:43 GMT

Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9,uz;q=0.8
Access-Control-Request-Headers:authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:5000
Origin:http://localhost:4200

Answer 1

角6==

public IsClientCreditCardExits(companyId: string, token: any) {
    let header = new Headers({ 'Authorization': `Bearer ${token}` });
    const options = new RequestOptions({
       headers: header,
    });
    return this._http.get(this.ApiURL + "api/Subscriptions/IsClientCreditCardExits/" + companyId + "/", options);    
}

Answer 2

如果你不想添加拦截器，这对我有用：

var header = {
  headers: new HttpHeaders()
    .set('Authorization',  `Basic ${btoa(AuthService.getToken())}`)
}

this.http.get(url, header)

对于持票人，

set('Authorization',  `Bearer ${AuthService.getToken()}`)

Answer 3

关于在Angular中处理身份验证头的最佳方法

下面是我在应用程序中使用的AuthInterceptor的完整示例：

auth.interceptor.ts

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        'Authorization': `Bearer ${AuthService.getToken()}`,
      },
    });

    return next.handle(req);
  }
}

您需要在应用程序中注册拦截器。模块作为提供程序：

应用程序。单元ts

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthInterceptor } from '../auth/auth.interceptor';

...

imports: [
    HttpClientModule,
    ...
],
providers: [
    {
      provide : HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi   : true,
    },
    ...
],

...

您可以在这篇文章中进一步了解这种方法。

关于Go方面的事情，这很可能是您发送的请求标头和CORS允许的标头之间不匹配的情况。
你应该尝试的第一件事是允许所有它们：

headersOk := handlers.AllowedHeaders([]string{"*"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

如果问题消失了，试着仔细地按照客户发送的内容一个接一个地构建COR。