Question

我有一个要联系的REST-API，它可以在swagger上工作。现在我尝试使用我的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);
}

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

Answer 1

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

在此处阅读有关CORS的更多信息： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS https://www.maxcdn.com/one/visual-glossary/cors/

还阅读了关于Angular JS的CORS问题的这个帖子：AngularJS CORS Issues

Answer 2

CORS错误与服务器有关。在这里，您的服务器未设置为接受来自localhost的请求（它在错误中写入）。您在开发时允许所有（*），或者您找到正确的Origin来接受。

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

Answer 3

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

对于Headers，请使用Headers.append：

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

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

Angular 4 Headers没有通过

3 个答案: