Question

我正在尝试从具有oAuth身份验证的API获取数据。我正在做的是将server1（我的Angular应用程序所在的位置）的auth请求发送到server2，然后我获得访问令牌。然后我将令牌放在JS变量中，我试图访问API端点。

我的js代码如下所示：

let headers = new Headers({ 'Authorization': "Bearer " + oAuthAccessToken });
let options = new RequestOptions({ headers: headers });
let url = "http://example.com/api/getSomething"
this.http.post(url, body, options)
    .subscribe( res => {
         console.log(res.json())
});

问题在于我总是得到＆＃34; 401 Unathorized＆＃34;。当我在Chrome开发工具的网络选项卡中检查请求时，我看到两件奇怪的事情 - 首先是请求方法是OPTIONS而不是POST，并且缺少标题授权。

知道我可能做错了什么吗？为什么标题没有设置？

编辑：

问题是Angular在POST之前发送OPTIONS请求，而我的应用防火墙期望授权标头始终存在。 OPTIONS请求中不存在此标头，因此我收到了未经授权的信息。我更改了我的服务器应用程序以在OPTIONS请求上发送正确的标题，现在一切都很好。

感谢您的帮助。

Answer 1

我认为浏览器尝试发现允许哪些http方法，因此第一个请求是使用OPTIONS方法的请求。通常，后端服务在标头内以Access-Control-Allow-Methods回答。然后浏览器发送实际请求。

我认为您需要允许CORS，然后它应该按预期工作

Answer 2

当您处理跨域请求时，Chrome正在预检查找CORS标头的请求。如果请求是可接受的，它将发送实际请求。所以选项请求只是检查是服务器支持CORS。

来自：https://stackoverflow.com/a/21783145/3279156

Answer 3

Content-Type应如下所示：

let header= new Headers({'Content-type':'application/x-www-form-urlencode'});    
header.append('Authorization',"Bearer " + token);
let opt= new RequestOptions({headers:header});

Angular 2发送标头进行授权

3 个答案: