标题中出现错误“访问控制允许来源”答案

【问题标题】：Error 'Access-Control-Allow-Origin' into header标题中出现错误“访问控制允许来源”
【发布时间】：2020-01-10 00:07:45
【问题描述】：

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

从源“http://localhost:4200”访问“*********”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：无“访问权限” -Control-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); 
  }
}

【问题讨论】：

标签： angular rest api http cors

【解决方案1】：

CORS 标头应在服务器端设置。要解决您的问题，您可以设置代理。看看有角的documentation

【讨论】：

@Xing 是否在 Postman 中正常工作并且在我的代码中将标志 Access-Control-Allow-Origin 放入标题中并不重要？
Postman 不受同源策略的约束，因此不需要服务器的 CORS 支持。
CORS 标头是响应标头 - 在服务器上设置。 Postman 工作的原因是 - 与浏览器不同 - 它不会阻止 CORS 请求......