如何将授权标头添加到 Angular http 请求？

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个Golang开发实战，手把手教大家学习《如何将授权标头添加到 Angular http 请求？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

问题内容

这是我的第一篇文章。

我刚刚开始学习 Go 和 Angular，我正在尝试将 Angular 应用程序连接到 Go api。我已经写了两个，并且一直在确定问题的根源。我认为这是一个 CORS 问题，但如果我不在我的 Angular http 请求中包含标头代码行，它就可以正常工作。在这一点上，我只是想添加标题。授权码尚未实现。

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

无效的 Angular http 请求：

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

有效的角度http请求：

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

我收到此错误：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“ http://localhost:4200 ”。响应具有 HTTP 状态代码 403

我在 go 代码中使用了 gorilla/mux 和 gorilla/handlers

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

正确答案

关于在 Angular > 4中处理 Authentication 标头的最佳方式，最好
Http Interceptors将它们添加到每个请求中，然后
Guards用于保护您的路由。

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, next: HttpHandler): Observable> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        'Authorization': `Bearer ${AuthService.getToken()}`,
      },
    });

    return next.handle(req);
  }
}

您需要在app.module提供者中注册您的拦截器：

app.module.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,
    },
    ...
],

...

[您可以在这篇文章](https://medium.com/@ryanchenkie_40935/angular-authentication-using- the-http-client-and-http-interceptors-2f9d1540eb8)中进一步了解此方法。

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

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

如果问题消失，请尝试将您的 CORS 与您的客户发送的内容一一地仔细构建。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于Golang的相关知识，也可关注golang学习网公众号。