Angular2 获取请求抛出 406 Http 错误

Question

我们又来了。我收到 406 作为 Angular 客户端调用的响应。

这次我的 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 输出的 html 组件

<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 控制台错误

Console error : http 406

我用谷歌搜索了很多，但找不到类似的问题。 有什么想法吗？

Answer 1

HI Header 应该使用 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;
          });