Angular2使用带头信息的HTTP Get请求失败

Question

我正在尝试通过Angular2 Http执行简单的get请求，代码如下：（token也已经通过向我的API发起的post请求获得）

let idToken = localStorage.getItem('id_token');
let authHeader = new Headers();
if (idToken) {
    authHeader.append('Authorization', 'Bearer ' + idToken);
}
return this._http.get('http://someapicall-to-my-custom-api', {headers: authHeader})
.map(response => response.json())
.subscribe(
    data => console.log(data),
    error => console.log(JSON.stringify(error)),
    () => console.log('Completed')
);

如果我调用我的API时没有头，则会返回良好的结果。一旦添加标头，它仅通过subscribe中的错误运行。问题是我需要开始发送带有标头的请求以获取一些受保护的数据，但迄今为止失败了。

在控制台中，我根本看不到有用的信息，只看到这个：

{"_body":{"isTrusted":true},"status":200,"ok":true,"statusText":"Ok","headers":{},"type":3,"url":null}

在向API发送GET请求时，我发现没有200 OK，但是当我没有添加头信息时，却可以看到200 OK。此外，没有响应头。

如果我尝试使用Postman进行相同的操作，在该程序中没有任何问题。

我希望有人能指点我正确的方向。这可能是我的API出了问题吗？我如何调试它呢？

- Ahzrael

---

你能在服务器上看到是否收到了请求吗？ - Günter Zöchbauer

谢谢你的建议，但我不确定如何检查。我感到奇怪的是，如果我只是不发送任何标头，控制台会得到一个200的ok结果。只是如果我尝试添加一个标头，它会失败，并且得到文章中描述的结果。我尝试使用的API是使用dingo创建的自定义Laravel API，我也添加了一个标头以允许跨域请求。 - Ahzrael

可能是CORS问题，需要明确允许自定义标头，但我希望能得到适当的错误消息。您没有控制服务器吗？它是什么类型的服务器？ - Günter Zöchbauer

之前我在尝试向API的非受保护端点进行POST请求时遇到了CORS问题，后来我在Laravel路由文件中添加了以下代码：header('Access-Control-Allow-Origin: *'); 这解决了这个问题。所以现在我认为不应该再有与此相关的问题了。我同时控制着前端（angular2）和API后端，后者是我自己开发的Laravel。 - Ahzrael

哇，你太棒了！！！我刚刚在我的API中添加了这个：header('Access-Control-Allow-Headers: Content-Type, X-Auth-Token, Origin, Authorization'); 然后它开始工作了！！！非常感谢。 - Ahzrael

Answer 1

你还需要：

Access-Control-Allow-Headers: Authorization

参见CORS：授权被Access-Control-Allow-Headers禁止

- Günter Zöchbauer

Answer 2

通过将以下内容添加到我的Laravel API中的routes.php文件中，我尝试调用它并使其开始工作。感谢Günter Zöchbauer给了我这个想法来添加它 :)

header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');

- Ahzrael

Answer 3

这种情况发生在电子应用程序和Chrome扩展的上下文中。

原因是您的应用程序和服务器之间存在代理（通常是企业内部域的身份验证代理服务器）。这个新的URL将不匹配您的应用程序所加载的页面URL或其他受信任的URL。

不幸的是，您不知道代理服务器上的域名以将其添加到受信任的URL中。因此，无法解决此问题。

- David Dehghan