跨域资源共享错误(CORS)Angular 10 [英] Cross-Origin Resource Sharing Error (CORS) Angular 10

问题描述

使我成为使用Angular 10(前端)和Node.js(后端)的Web应用程序.但是，当我通过添加标头发送请求时，它不起作用.(当关闭CORS并在Chrome上发送请求时，该方法就起作用了)我被发现在StackOverflow上缺少一些类似的答案，但是不幸的是，这些答案对我不起作用:|

I was made Web Application Using Angular 10 (Front-end) and Node.js(Backend). But when I send requests by adding Headers it was not working. (It was worked when Turn off CORS and send a request on Chrome) I was found lack some similar answers on StackOverflow but unfortunately, those are not worked for me :|

我发送了如下请求，

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)
    })
  }

还有，我也在尝试遵循以下代码，

as well as, also i was try following code,

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)
    })
  }

两种类型的

均无法正常工作.显示错误如下.

both types are not working properly. It was displayed error as follows,

如何解决此问题?希望等待您的宝贵回应！

How can I fix this issue? Hopefully waiting for your valuable response!

推荐答案

出现此问题的原因是使用 Angular HTTPClient ，我正在按如下方式更改代码，

This Issue cased due to a custom header set using Angular HTTPClient, I was change the code as follows,

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)
    })
  }

注意:我还将后端标头名称更改为授权"

Note: I also changed the backend header name to " Authorization"

现在它可以正常工作了.

Now it's working properly.

这篇关于跨域资源共享错误(CORS)Angular 10的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！