Question

我有一个名为 ProjectService 的服务，其中存在以下代码：

..... # skip codes
getProjects(): Observable<any> {
    let url = API.MAIN_URL + '/api/project/';
    return this.http.get(url, this.requestHeaders())
      .map(this.extractData)
      .catch(this.handleErrorObservable);
  }

..... # skip codes
requestHeaders(): any {
    let headers = new Headers();
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append('Authorization', 'token ' + localStorage.getItem('token'));
    let options = new RequestOptions({headers: headers});
    return options;
  }

在我的 ProjectComponent 中，我尝试通过以下代码订阅getProjects()中的ProjectService：

ngOnInit() {

    this._projectService.getProjects().subscribe(data => {
        this.projects = data;
      },
      error => this.message = this.errorMessage(error._body));

  }

问题是，每当我的ProjectComponent加载时，我的控制台都会出现以下错误：

预检的响应包含无效的HTTP状态代码401

我转到我的浏览器网络面板查看错误，它显示

“未提供身份验证凭据。”

表示我的请求没有任何授权令牌。

我使用了ModHeader插件。然后在token eaab49d1dd392bda3fb807f33e1eb296897efc79哈希值中添加令牌Authorization 它就像一个魅力！

不知道如何解决问题。

Answer 1

编辑：更新答案以反映评论

这是由于Angular提出的OPTIONS请求。添加类型为HttpOptions的其他端点，返回状态200 OK，同时确保此端点不需要身份验证。

Answer 2

也许它会帮助你：

let headers = new Headers({ *your headers* });
let options = new RequestOptions({ withCredentials: true, headers });

然后尝试

http.get(url, options)

Answer 3

尝试以这种方式创建标题：

setHeaders()
{
    this.headers = new Headers
    ({
        'authorization': localStorage.getItem('token')
    });
}

并发送请求方法：

send_request_get(url: any)
{
    this.setHeaders();
    let options = new RequestOptions
    (
        {
            headers: this.headers
        }
    );

    return this.http.get(url,options )
    ...
}

Answer 4

不要笑，但我确定这是我上面问题中最蹩脚的答案。我刚刚更改了以下几行：

let headers = new Headers();
let options = new RequestOptions({headers: headers});

对此：

const headers = new Headers();
const options = new RequestOptions({headers: headers});

然后它有效！

此外，我之前使用Http，然后切换到HttpClientModule。但他们现在正在努力。

Angular2无法设置HTTP标头授权

4 个答案: