基本認証でHTTPリクエストが返される401 - 角4のヘッダーで問題が発生する

Question

これは編集済みの投稿です。私は基本的な認証（ユーザーとパスのような）とparamsオブジェクト（フォームにバインド）を持つAPIからこの単純なhttpリクエストを試しています。私はドキュメントを読んで、いくつかの投稿をチェックアウトしましたが、何も動作していないようです。私は常に401として応答を得ます...

いくつか私に助けを与えることができますか？

これは私が持っているものである（私はこの時に新たなんだ）：

import { Component, OnInit } from '@angular/core'; 
import {HttpClient} from '@angular/common/http'; 
import {Http, Headers} from '@angular/http'; 
import {response} from '../../models/response'; 
import {HttpErrorResponse} from '@angular/common/http'; 
import {HttpHeaders} from '@angular/common/http'; 

@Component({ 
    selector: 'app-testing', 
    templateUrl: './testing.component.html', 
    styleUrls: ['./testing.component.css'] 
}) 

export class TestingComponent implements OnInit { 

    //OPTIONS 
    selectedColor:string; 
    selectedFont:string; 
    selectedSize:string; 

    //INTERFACE 
    results: response; 


    params = { 
    "handwriting_id": "8X3WQ4D800B0", 
    "text": "", 
    "handwriting_size": "", 
    "handwriting_color": "", 
    } 

    constructor(private http: HttpClient) { } 

    ngOnInit() { 
    } 

    onSubmit(f){ 

     console.log(this.params); 

     this.http.get<Response>('https://api.handwriting.io/render/png?' + this.params,{ 
     headers: new HttpHeaders().set('7Q0ZBC889M7WRGRM','N6BQK4Z8PZ1HYYT4'), 
     }).subscribe(data => { 
     this.results = data['results']; 
     console.log(this.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}`); 
      } 
     }); 
    } 

    //OPTIONS 

    changeFont(){ 
     document.getElementById("output-text").style.fontFamily = this.selectedFont; 
     } 
    changeColor(){ 
    document.getElementById("output-text").style.color = this.selectedColor; 
     } 
    changeSize(){ 
    document.getElementById("output-text").style.fontSize = this.selectedSize; 
     } 
     } 

Answer 1

私は解決策にこのpostに感謝を発見しました。

後：今

headers: new HttpHeaders().set('7Q0ZBC889M7WRGRM','N6BQK4Z8PZ1HYYT4'), 
     }).subscribe(data => {//etc 

：あなたは環境データを使用している

headers: new HttpHeaders().set('Authorization', 'Basic ' + 
     btoa('STRSKVENJVBD0JDS:4ZN6VD256FEBHSM1')) 
     }).subscribe(data =>//etc 

Answer 2

私はあなたがサービスのエンドポイントにデータを取得することになっている方法を取得する場合は知らない...しかし、もしヘッダーを介して郵便配達員と一緒に送った後、適切なやり方をしたいと思っています。こうすることで、メインのapp.moduleに簡単なインターセプタを提供し、サービスで新しいhttpClientを使用することができます。この方法では、サービスによって行われたすべてのリクエストにヘッダが自動的に追加されます。ここで

は、あなたのケースのためにリファクタリングする必要があり、簡単なチュートリアルです：

1）インターセプタを作成：

import {Injectable} from '@angular/core'; 
import {HttpRequest,HttpHandler,HttpEvent,HttpInterceptor} from '@angular/common/http'; 
import {Observable} from 'rxjs/Observable'; 
@Injectable() 
export class Interceptor implements HttpInterceptor { 
    constructor() {} 
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

     request = request.clone({ 
      setHeaders: { 
       Authorization: `Bearer ${YOUR_TOKEN}` <-- the API should expect a token here 
      } 
     }); 

    return next.handle(request); 
    } 
} 

2）あなたのメインモジュールでインターセプタを提供します（通常はapp.module.ts ）：

import {HTTP_INTERCEPTORS} from '@angular/common/http'; 
import {Interceptor} from './path/to/interceptor'; 
@NgModule({ 
    bootstrap: [AppComponent], 
    imports: [...], 
    providers: [{provide: HTTP_INTERCEPTORS,useClass: Interceptor,multi: true}] 
}) 

export class AppModule {} 

3）インターセプタを適用します新しいHttpClientを（角4.3）を使用して、サービスに：

import { HttpClient } from '@angular/common/http'; <-- IMPORTANT new httpClient 

export class DataService { 

    constructor(public http:HttpClient) { 

    } 

    getPNG(){ 
     return this.http.get('https://api.handwriting.io/render/png') 
      .map(res => res); 
    } 

     addHand(user){ 
     return this.http.post('https://api.handwriting.io/render/png', user) 
      .map(res => res); 
     } 
    }