角度 CORS 请求失败答案

【问题标题】：Angular CORS request failed角度 CORS 请求失败
【发布时间】：2019-07-17 18:28:16
【问题描述】：

我正在尝试连接到 Api（不是我的），但我收到了 CORS 错误（屏幕 1）。

然后我尝试在我的标题中添加 'Access-Control-Allow-Origin': '*' 但我得到了相同的结果（screen2）。

这是我的代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-analyzer',
  templateUrl: './analyzer.component.html',
  styleUrls: ['./analyzer.component.scss']
})
export class AnalyzerComponent implements OnInit {

  constructor(private http: HttpClient) {
    this.getDeck().subscribe(res => console.log(res));
  }

  ngOnInit() {
  }

  getDeck() {
    const headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*'
    });
    return this.http.get('https://www.keyforgegame.com/api/decks/30763530-041c-4e15-b506-3456e79141d2/',
      {headers: headers}
      );
  }

}

我不知道该怎么办了..

谢谢

【问题讨论】：

我以前也遇到过同样的问题。（如果你想看看：stackoverflow.com/questions/54168106/…）我了解到 cors 对邮递员来说不是问题。也许你可以使用 chrome 扩展来绕过 cors 进行测试，但我猜不是一个解决方案。
感谢您的回复。我放邮递员只是为了展示get作品。你说得对，邮递员不关心标准操作程序
我找到了解决方案，请参阅下面的答案。希望这会对你有所帮助:)
我解决了我的服务器头问题（实际上是让我的经理解决它）。但我会为我未来的项目保存这个答案。谢谢。
欢迎您。我很高兴你也找到了答案:)

标签： angular cors

【解决方案1】：

终于找到了一个关于我的问题的优秀article。它提到我有 3 个解决方案：

CORS 标头（需要更改服务器）==> 然后否
JSONP ==> heeem ...否
代理服务器 ==> 好吧.. 好的

我尝试第三种解决方案。但老实说我很气馁，所以首先我尝试了一个不错的解决方案：我借了一个 cors 代理（这个one 非常好）

然后我执行以下操作：

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-analyzer',
  templateUrl: './analyzer.component.html',
  styleUrls: ['./analyzer.component.scss']
})
export class AnalyzerComponent implements OnInit {

  res;

  constructor(private http: HttpClient) {
    this.getDeck().subscribe(res => {console.log(res); this.res = res; });
  }

  ngOnInit() {
  }

  getDeck() {
    const headers = new HttpHeaders({
      'X-Requested-With': 'XMLHttpRequest'
    });
    return this.http.get('https://cors-anywhere.herokuapp.com/https://www.keyforgegame.com/api/decks/30763530-041c-4e15-b506-3456e79141d2/',
      {headers: headers}
      );
  }

}

最后它起作用了。

【讨论】：

【解决方案2】：

不应在您的请求中设置“Access-Control-Allow-Origin”：“*”，而应在服务器的响应中设置。希望您可以访问此服务器。

另外考虑不使用通配符，而只允许http://localhost:4200。无需向所有人开放。

【讨论】：

正如我所说，服务器不是我的，我无法配置它。我试着插上它

【解决方案3】：

邮递员请求通过，因为它不关心 CORS。正如 Chris 所说，CORS 应该在服务器中设置（keyforge）。

我查看了该网站，似乎他们还没有任何 api 文档，所以你最好联系他们的开发团队并询问他们是否可以在他们的白名单中注册 localhost:4000。

【讨论】：

感谢您的回复。目前无法与他们联系。关于邮递员，我已经说过我知道它不关心 SOP（请参阅我上面的评论），我发布它只是为了显示请求有效。虽然它有帮助，但我想我会删除它..