授权 header 未在 Angular 2 JSONP 请求中发送

Question

我正在进行 JSONP 调用，需要在授权中传递不记名令牌 header。但是，尽管我的代码中添加了 headers，但请求中未添加授权 header（在 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);

我在这里错过了什么？

Answer 1

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

您无法将 Authorization header 添加到请求的原因是，如果您使用的是 JSONP，则无法添加 any request headers 到请求。这是因为 JSONP 的工作原理是向文档添加一个 script 元素，然后将请求 URL 设置为该 script 元素的 src 属性的值。

因此您不能将请求 header 添加到浏览器为该 script 元素获取 URL 的请求中——就像您可以添加请求 headers 用于任何其他 script 元素。

如果您想使用 Authorization-header 请求授权，那么您需要使用 XHR 或 Fetch API 或 Angular,一个正常的$http.get(…).

在这种情况下，API 端点需要启用完整的 CORS 支持，包括对 CORS preflight OPTIONS request 的支持，由于存在 Authorization在请求中请求header.

授权 header 未在 Angular 2 JSONP 请求中发送

Authorization header not sent in Angular 2 JSONP request

javascript

jsonp

cors

typescript

angular