跨域资源共享错误 (CORS) Angular 10答案

【问题标题】：Cross-Origin Resource Sharing Error (CORS) Angular 10跨域资源共享错误 (CORS) Angular 10
【发布时间】：2021-05-16 07:54:35
【问题描述】：

我使用 Angular 10（前端）和 Node.js（后端）制作了 Web 应用程序。但是当我通过添加标头发送请求时，它不起作用。（关闭 CORS 并在 Chrome 上发送请求时有效）我被发现在 StackOverflow 上缺少一些类似的答案，但不幸的是，这些对我不起作用：|

我发送请求如下，

getAllSubmissions() {
    let token = sessionStorage.getItem('auth-token');
    let path = this.globe.base_path + 'get-submissions';
    this.http.get<any>(path, {headers:{'Access-Control-Allow-Origin':'*', 'auth-token':token}}).toPromise().then(data => {
      this.allsubmissoinsFiltered = data.filter(sub => sub.status != 'active')
      this.allSubmissionsCount = this.allsubmissoinsFiltered.length;
    }).catch(err => {
      console.log(err)
    })
  }

以及，我也在尝试以下代码，

getAllSubmissions() {
    let token = sessionStorage.getItem('auth-token');
    var header = { headers: new HttpHeaders().set('auth-token', token) }
    let path = this.globe.base_path + 'get-submissions';
    this.http.get<any>(path, header).toPromise().then(data => {
      this.allsubmissoinsFiltered = data.filter(sub => sub.status != 'active')
      this.allSubmissionsCount = this.allsubmissoinsFiltered.length;
    }).catch(err => {
      console.log(err)
    })
  }

这两种类型都不能正常工作。显示错误如下，

我该如何解决这个问题？希望等待您的宝贵回复！

【问题讨论】：

有这样的问题和答案stackoverflow.com/questions/64517800/…
@BojanKogoj 它也不起作用:(
我已经解决了这个问题。这是由于自定义标题而发生的。

标签： angular cors http-headers

【解决方案1】：

由于使用Angular HTTPClient 设置的自定义标头导致此问题，我将代码更改如下，

getAllSubmissions() {
    let token = sessionStorage.getItem('auth-token');
    var header = { headers: new HttpHeaders().set('Authorization', token) }
    let path = this.globe.base_path + 'get-submissions';
    this.http.get<any>(path, header).toPromise().then(data => {
      this.allsubmissoinsFiltered = data.filter(sub => sub.status != 'active')
      this.allSubmissionsCount = this.allsubmissoinsFiltered.length;
    }).catch(err => {
      console.log(err)
    })
  }

注意：我还把后端头的名字改成了“Authorization”

现在它可以正常工作了。

【讨论】：