Angular 4标头未通过答案

【问题标题】：Angular 4 Headers not passingAngular 4标头未通过
【发布时间】：2017-12-08 19:25:56
【问题描述】：

我有一个 REST-API 可以联系，它可以大摇大摆地工作。现在我尝试用我的 Angular 4 应用程序调用它。我得到了错误：

  XMLHttpRequest cannot load 
  "baseURL"/company/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access

当我查看调用时，我发现它没有传递任何标头（也不是令牌），但实际上我在 Angular 4 代码中将它们添加到我的请求中：

getCompanies(): Observable<Company[]> {
   let tokenobject =JSON.parse(sessionStorage.getItem('current_user'));
   let token = tokenobject.token;
   let headers = new Headers({ 'Access-Control-Allow-Origin' : 'http://localhost:4200','Authorization': token });
   let options = new RequestOptions({ headers: headers });
   return this.http.get(this.url + this.path, options)
          .map(this.extractData)
          .catch(this.handleError);
}

有什么我忘记或做错了吗？

【问题讨论】：

标签： angular rest api http

【解决方案1】：

这是一个 CORS 问题。如果要发出跨源请求，则需要在 API 端启用跨源请求。

另请阅读有关 Angular JS 的 CORS 问题的帖子：AngularJS CORS Issues

【讨论】：

【解决方案2】：

CORS 错误与服务器相关。在这里，您的服务器未设置为接受来自 localhost 的请求（它写在错误中）。要么在开发时允许所有 (*)，要么找到合适的 Origin 来接受。

否则，您的令牌应该消失，也许您没有看到它，因为它是 OPTIONS 请求而不是 GET 请求？（OPTIONS 请求在其他请求之前由浏览器发送）

【讨论】：

【解决方案3】：

对于CORS，其他人已经指出你需要在服务器上启用它。

对于标头，使用 Headers.append：

let headers = new Headers();
headers.append('Authorization', token );
let options = new RequestOptions({ headers: headers });

顺便说一句，对于授权标头，您可能需要考虑覆盖 angulars Http 类，以便将授权标头（当然，如果存在令牌）附加到所有请求，因此您不必手动添加它来获取、发布、删除...

【讨论】：

好的，谢谢，但我不想关闭 CORS... 有没有可能使用像 company.json 这样的文件并通过 http 访问它？我真的很想检查我的代码。
似乎有些混乱。您的 CORS 在服务器上已关闭（未启用）。或者，它可能已打开，但它不允许用于您的 localhost:4200 来源。这就是您的浏览器不允许您提出此类请求的原因。它与您的客户端代码无关。它在浏览器级别以及源服务器允许的内容（localhost：4200 只是另一个来源）
是的，我知道，但我想检查我的代码，所以我制作了一个 JSON 文件（本地），其中包含请求正文，所以我想 http 请求本地文件，以便我可以检查制作 html 的代码.. 但我似乎找不到文件的路径：