Angular2 Get請求拋出406 Http錯誤

Question

這裏我們再次去。我從角度客戶端調用中獲得了406作爲響應。

這次我在我的Angular 2應用程序的logging.component.ts上遇到問題。

該應用程序依賴於通過休息控制器交流的休息應用程序（彈簧啓動）。

我注意到，通過像郵差這樣的休息客戶端從控制器請求數據不會引發任何問題。

所以這個問題一定是在前端。

這是組件代碼：

import {Component, OnInit} from '@angular/core'; 
import {Router} from '@angular/router'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 
import {Http, RequestOptions, Headers} from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 
import {AppHTTPService} from '../../../login/appHTTP.service'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 
import {Cookie} from "ng2-cookies"; 


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


export class LoggingComponent implements OnInit { 

    p : number = 1; 
    logsRes; 
    logs; 
    individualLog = []; 
    logSelezionato = false; 

    private componentUrl = this.service.resourceUrl + "logging/"; 

    constructor(private service: AppHTTPService, private http : Http, private router: Router) {} 

    ngOnInit() { 
    this.getLogs(); 
    } 
//THIS IS THE METHOD CALLED FROM COMPONENT 
    viewLog(name) { 

     let access = Cookie.get('access_token'); 
     let headers = new Headers({ 
      'Accept':'application/json', 
      'Content-type': 'application/json', 
      'Authorization': 'Bearer' + access 
     }); 
     const options = new RequestOptions({headers: headers}); 

     this 
      .http 
      .get(this.componentUrl + name,options) 
      .map((res) => res.json()) 
      .subscribe(data => { 
       this.individualLog = data; 
      }); 

     this.logSelezionato = true; 
    } 

    getLogs() { 
    this 
     .service.getResource(this.componentUrl) 
     .subscribe(data => { 
     this.logsRes = data; 
     this.logs = this.logsRes; 
     }); 
    } 
} 

讓我告訴你，通過ngFor

<app-page-header [heading]="'Log'" [icon]="'fa-user'"></app-page-header> 

<div class="row user__nav"> 
    <div class="col-lg-12"> 
     <nav class="user__navigation"> 

      <ul class="user__tabs"> 

      </ul> 

     </nav> 
    </div> 
</div> 


<div class="wrapper"> 
    <div class="row display large-padding"> 
     <div class="col-lg-3"> 


      <table class="table table-striped table-hover"> 



       <thead> 
        <tr> 
         <th class="table__utility"><input type="checkbox" name="shouldDelete" [checked]="isChecked"/>&nbsp;</th> 


         <th>Log message</th> 


        </tr> 
       </thead> 

       <tbody> 

       <tr *ngFor="let log of logsRes"> 

<td><input type="checkbox" name="shouldDelete" [checked]="isChecked"/>&nbsp;</td> 


        <td><a (click)="viewLog(log.name)">{{log.name}}</a></td> 

       </tr> 
       </tbody>    

      </table> 
     </div> 

     <div class="col-lg-9" *ngIf="logSelezionato"> 

      <table class="table log-table table-striped table-hover"> 

       <thead> 
        <tr> 

         <th class="log-date_head">Date</th> 

         <th>Log message</th> 

        </tr> 
       </thead> 
<tbody> 
       <tr class="log-date_body" *ngFor="let singleLog of individualLog | paginate: {itemsPerPage: 25, currentPage: p}"> 

     <td>{{singleLog.logDate}}</td>  
        <td><a>{{singleLog.logMessage}}</a></td>     
       </tr> 
</tbody>   
      </table> 
      <pagination-controls class="pagination-controls" (pageChange)="p = $event"></pagination-controls> 
     </div> 
    </div> 

</div> 

而下面的圖片中可以看到Chrome使用輸出HTML組件控制檯錯誤

Console error : http 406

我搜索了很多，但我找不到類似的問題。 有什麼想法？

Answer 1

HI頭應該是使用append方法

let headers = new Headers() 
headers.append('Accept','application/json') 
headers.append('Content-type','application/json') 
headers.append('Authorization','Bearer' + access) 
this.http.get(this.componentUrl + name,{ headers: headers}) 
      .map((res) => res.json()) 
      .subscribe(data => { 
       this.individualLog = data; 
      });