未在 Angular 2 JSONP 请求中发送授权标头答案

【问题标题】：Authorization header not sent in Angular 2 JSONP request未在 Angular 2 JSONP 请求中发送授权标头
【发布时间】：2018-01-27 13:17:23
【问题描述】：

我正在进行 JSONP 调用，并且需要在授权标头中传递不记名令牌。但是，尽管在我的代码中添加了标头，但并未将授权标头添加到请求中（在 Fiddler 中检查）。该代码利用了 Angular 2 和 TypeScript。这是我的代码-

    let headers = new Headers({ 'Authorization': 'Bearer ' + token  });
    let options = new RequestOptions({ headers: headers, withCredentials: true });
    this.url = "http://api.azurewebsites.net/api/search/" + params;

    return this.jsonp.request(this.url, options)  
        .map(this.extractData)
        .catch(this.handleErrorObservable);

我在这里错过了什么？

【问题讨论】：

我猜应该是let headers = new Headers({'Authorization', 'Bearer ' + token }
如果我使用逗号而不是冒号，则代码不会生成。抛出异常提及“;”预期的。确切地说 - TS1005: ':' 预期。
{ 'Authorization': 'Bearer ' + token } 是标准的，应该可以工作。我认为错误是因为您使用的是 withCredentials 并且不包括凭据的第二个参数。删除withCredentials 或更改为this.jsonp.request(this.url, '', options)
在声明后尝试使用header.append('Authorization', 'Bearer ' + token);
@Aravind - 我试过了，但行为是一样的，标题没有通过

标签： javascript angular typescript cors jsonp

【解决方案1】：

如果您使用的是 JSONP，则不能使用 Authorization 标头要求授权。相反，除非您配置其他一些授权方式，否则您返回 JSONP 的端点必须响应来自任何地方的请求，而不需要 Authorization 标头。

您无法将Authorization 标头添加到请求的原因是，如果您使用的是 JSONP，那么您无法将任何请求标头添加到请求中。这是因为 JSONP 的工作原理是在文档中添加一个 script 元素，然后将请求 URL 设置为该 script 元素的 src 属性的值。

因此，您无法将请求标头添加到浏览器为获取该 script 元素的 URL 而发出的请求中——您只能为任何其他 script 元素添加请求标头。

如果您想使用Authorization-header 请求授权，那么您需要使用 XHR 或 Fetch API 等普通方法或在 Angular 中使用普通的 $http.get(…) 发出请求。

在这种情况下，API 端点需要启用完整的 CORS 支持，包括对 CORS preflight OPTIONS request 的支持，由于请求中存在 Authorization 请求标头，浏览器将自动生成。

【讨论】：

谢谢@sideshowbarker，对 JSON 的脚本元素和标题部分进行了很好的解释。这使事情的运作方式变得清晰！我确实将代码更改为使用 http.get 并且确实看到 Options Preflight 发生了，但我认为我的令牌也存在问题。将回发并接受接受答案，但很好地提及基础知识！