角 2 | 401未经授权答案

【问题标题】：Angular 2 | 401 Unauthorized角 2 | 401未经授权
【发布时间】：2018-04-16 20:30:18
【问题描述】：

美好的一天，我正在构建一个仅使用令牌获取 API 数据的简单应用程序，但我遇到了未经授权的访问错误...

谁能帮我弄清楚为什么会出现这个错误？

401 未经授权

import { Component, ViewEncapsulation } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class AppComponent {

    data: any = {};

        constructor( private http: Http ) { }

        ngOnInit() {
            this.getVoicepicData();
            this.getData();
        }

        getData(){
            let headers = new Headers({
                'Token': "TOKEN HERE",
                'Content-Type': 'application/json'
            });

            return this.http.get('http://apiURL.com/api/voice/get-voice-pick-
            file/', { headers: headers })
                .map((res: Response) => return res.json())
        }

        getVoicepicData() {
            this.getData().subscribe(data => {
                console.log(data)
                this.data = data
            })
        }

    }

我该如何处理这个错误？有人可以帮我解决这个问题吗？我是否正确设置了令牌？

编辑： 缺少import { Headers } from '@angular/http';

【问题讨论】：

401可能有很多原因：令牌可能过期、无效、损坏、空等。所以让我们从简单的开始。我建议您检查令牌是否到达服务器端？
是的，它确实到达了服务端，我将它与 jquery 一起使用并且工作正常。就在我使用 angular2 时，它似乎不起作用。
尝试新的 RequestOptions({ headers: headers }) 而不仅仅是 { headers: headers }
我正在获取 requestoptions 未定义。很抱歉问这个我只是 Angular 的新手
将它们添加到导入 Http 的地方

标签： angular api typescript

【解决方案1】：

试试这个：

let headers = new Headers({
                'Authentication': "bearer <space><TOKEN HERE>",
                'Content-Type': 'application/json'
});

【讨论】：