首页 > 解决方案 > 标题中出现错误“访问控制允许来源”

问题描述

在我的 Angular 应用程序中,当我需要通过基本身份验证从我的 API 进行 GET 调用时,我在我的 JS 控制台中收到此错误:

从源“ http://localhost:4200 ”访问“*********”处的 XMLHttpRequest已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:没有“访问控制” -Allow-Origin' 标头出现在请求的资源上。

如果我尝试使用 Postman,则相同的呼叫没有任何问题。我该如何解决?这是我的代码:

export class DataService {

  constructor(private http: HttpClient) { }

  private postsURL = "********";

  getData(){
    const httpOptions = {
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Expose-Headers': 'Content-Length,X-Foo,X-Bar',
        'Content-Type':  'application/json',
        'Authorization': 'Basic ' + btoa('*****:*****')
      })
    };

    return this.http.get(this.postsURL, httpOptions); 
  }
}

标签: angularrestapihttpcors

解决方案


CORS 标头应在服务器端设置。要解决您的问题,您可以设置代理。看看角度文档


推荐阅读