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

使用输出的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

我已经google了很多，但我找不到类似的问题。有什么想法吗？

Answer 1

HI标题应使用追加方法

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

Angular2获取请求抛出406 Http错误

1 个答案: