Angular HttpClient 简单的 GET 发送预检选项。如何强制我的 GET 保持简单请求？答案

【问题标题】：Angular HttpClient simple GET sending preflight OPTIONS. How do I enforce my GET to remain a simple request?Angular HttpClient 简单的 GET 发送预检选项。如何强制我的 GET 保持简单请求？
【发布时间】：2019-03-27 17:59:36
【问题描述】：

正如标题所述，我想发出一个没有预检选项的简单 GET 请求，因为服务器没有响应“Access-Control-Allow-Origin”标头，我无法更改这些服务器设置.

我的代码相当简单：

export interface HttpOptions {
  headers?: HttpHeaders;
  params?: HttpParams;
  observe?: 'body';
}

private getProfileDetails() {

  const httpOptions: HttpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'text/plain'
    }),
    params: new HttpParams()
      .set('service', 'http%3A%2F%2Flocalhost%3A4200')
      .append('ticket', this.currentTicket)
      };

  this.http.get('https://server.address/val', httpOptions).subscribe(data => {
     console.log(data);
   });
}

由于某种原因，浏览器不断收到错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

据我了解，这应该是一个简单的 GET 请求，不需要 OPTIONS，所以我有点不知所措。

任何提示将不胜感激。

【问题讨论】：

CORS 是一个可怕的问题！最简单的方法是从服务器而不是前端提交请求。在您的后端创建一个发送请求、接收响应并将其发送回您的应用的路由。
OPTIONS 请求是针对 corss-origin 请求的。您无法删除它们，您的浏览器使用它们来检查端点的有效性。只需在后端接受这些请求，您就可以开始了
@trichetriche - 进行了更改，但不知道为什么这应该是评论。当我无法更改 Access-Control-Allow-Origin 设置时如何解决 CORS 问题的问题的答案是从后端发送请求。
您可以使用plugin 轻松绕过此问题。
@sideshowbarker 是对的，这不一定是预检请求问题，但它仍然是 CORS 问题。最好知道您的错误是拥有后端 CORS 配置。 OP，因为人们拒绝做他们的工作，并不意味着您应该解决他们的懒惰并使用不良做法来满足您的需求...... CORS 配置就像 API 的基础，如果他们不更新他们的代码，我建议你去找他们的主管和他谈谈！

标签： angular http cors http-headers

【解决方案1】：

您将需要探索为您的 API 请求设置 angular-cli 代理。

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

【讨论】：

应该是评论。
我会调查的
虽然这个答案对于开发目的可能是可以接受的，但我认为一旦部署了应用程序，您就无法访问 CLI。您应该在后端编辑 CORS 设置，而不是为您所在的每个环境配置代理。
@tricheriche 我不同意。我不是简单地将 Michel 重定向到另一个 stackoverflow 答案，因此，这不是一个微不足道的答案。基于 CORS 错误，这是一个开发环境；我为这个问题提供了一个可行的答案，因为它与所提供的错误/信息有关。因为 OP 没有提供有关最终将如何托管解决方案的其他信息，所以除了回答所提出的问题之外，我做任何事情都是冒昧的......因为除此之外的任何事情都提供了我对我所相信的观点/假设在没有适当信息的情况下做到最好。
@Marshal 我不质疑您的回答质量：这是一个完全可行的解决方案（尽管我不同意您的观点，因为它是 the 解决方案，如我之前的评论）。我的“问题”在于您刚刚提供了一个存储库 wiki 的链接，仅此而已。这是应该是评论的那种答案（没有代码，没有解释）。其余的，这只是常识：在每个环境中都没有改变的一侧进行修改。与托管无关，这只是最佳做法。