AuthorizationヘッダーをAngular httpリクエストに追加するにはどうすればよいですか？

Question

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

私はちょうどGoとAngularを学び始めました。私は、アングルアプリをgo apiに接続しようとしています。私は両方を書いており、問題の根本を特定している。 CORSの問題だと思っていましたが、Angular httpリクエストにヘッダー行を含めないと正常に動作します。この時点で、私はヘッダを追加しようとしています。承認コードはまだ実装されていません。

両方のアプリケーションがポート5000上で囲碁アプリでローカルに実行し、動作しない4200

角度のHTTPリクエストに応じて角度いる：作品

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

このエラーが発生します：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:4200 ' is therefore not allowed access. The response had HTTP status code 403

私はここではクローム開発ツールから、私の行くのコード内のハンドラ

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

ヘッダ

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

角で>の認証ヘッダーを処理する最良の方法については、
を使用するのが最善です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でさらに読むことができます。

---

物事のゴーの側面に関しては、これが最も可能性の高いあなたが送っていると、ヘッダーCORSができるよう
リクエストヘッダの間のミスマッチの場合です。あなたは試してみてください
まず最初は、それらのすべてが可能されています

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

、問題が消えている場合は、あなたのクライアントが送信しているものに、あなたのCORS一つ一つを構成丁寧にしてみてください。

Answer 2

/ゴリラ/マルチプレクサとゴリラを使用しています例です。

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