web-dev-qa-db-ja.com

許可ヘッダーをAngular http要求に追加する方法

これは私の最初の投稿です。

GoとAngularの学習を始めたばかりで、angularアプリをGo APIに接続しようとしています。私は両方を書きましたが、問題の根本を特定するのにこだわっています。これはCORSの問題だと思いましたが、Angular httpリクエストにコードのヘッダー行を含めなくても問題ありません。この時点で、ヘッダーを追加しようとしています。認証コードはまだ実装されていません。

両方のアプリがポート5000のGoアプリと4200のAngularでローカルに実行されています

動作しないAngular HTTPリクエスト：

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

動作するAngular HTTPリクエスト：

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

私はこのエラーを受け取っています：

プリフライトリクエストへの応答がアクセスコントロールチェックに合格しません。リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost：42 'はアクセスを許可されていません。応答の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 Dev Toolsのヘッダー

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
angulargogorilla
13
gobuckeyes2

Angular> 4で認証ヘッダーを処理する最良の方法に関しては、使用するのが最善です
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<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);
  }
}

インターセプターをプロバイダーとして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,
    },
    ...
],

...

このメソッドについては、この post でさらに読むことができます。

Goの側面については、これはおそらく
送信するヘッダーとヘッダーCORSは許可します。
最初に試すべきことは、それらすべてを許可することです。

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

問題が解決した場合は、クライアントが送信しているものに合わせてCORSを1つずつ慎重に構造化してみてください。

34
Mihailo

インターセプターを追加したくない場合、これは私のために働いた：

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

this.http.get(url, header)

Bearerの場合、

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

以下に例を示します。

this.http
        .get(url, return new RequestOptions({
          headers: new Headers({
            Authorization: `Bearer ${authtoken}`
          }),
        }))
        .map(res => res.json());
0
David Alexander

Angular 6 ==> Authorizationヘッダーを使用したHTTP Getリクエストの例

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