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

Posted 2023-03-04

【中文标题】Angular HttpClient 简单的 GET 发送预检选项。如何强制我的 GET 保持简单请求？

【英文标题】：Angular HttpClient simple GET sending preflight OPTIONS. How do I enforce my GET to remain a simple request?

【发布时间】：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 的基础，如果他们不更新他们的代码，我建议你去找他们的主管和他谈谈！

【参考方案1】：

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

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

【讨论】：

应该是评论。

我会调查的

虽然这个答案对于开发目的可能是可以接受的，但我认为一旦部署了应用程序，您就无法访问 CLI。您应该在后端编辑 CORS 设置，而不是为您所在的每个环境配置代理。

@tricheriche 我不同意。我不是简单地将 Michel 重定向到另一个 *** 答案，因此，这不是一个微不足道的答案。基于 CORS 错误，这是一个开发环境；我为这个问题提供了一个可行的答案，因为它与所提供的错误/信息有关。因为 OP 没有提供有关最终将如何托管解决方案的其他信息，所以除了回答所提出的问题之外，我做任何事情都是冒昧的......因为除此之外的任何事情都提供了我对我所相信的观点/假设在没有适当信息的情况下做到最好。

@Marshal 我不质疑您的回答质量：这是一个完全可行的解决方案（尽管我不同意您的观点，因为它是 the 解决方案，如我之前的评论）。我的“问题”在于您刚刚提供了一个存储库 wiki 的链接，仅此而已。这是应该是评论的那种答案（没有代码，没有解释）。其余的，这只是常识：在每个环境中都没有改变的一侧进行修改。与托管无关，这只是最佳做法。