OPTIONS 请求未通过 Angular2 Http 的 http 调用触发答案

【问题标题】：OPTIONS request is not firing with http call through Angular2 HttpOPTIONS 请求未通过 Angular2 Http 的 http 调用触发
【发布时间】：2016-07-23 13:49:09
【问题描述】：

我正在使用 Angular2 结构，我想从服务器中提取信息。现在，我的 api 域与 FrontEnd 应用程序不同，我希望浏览器会在执行实际请求之前触发 OPTIONS 请求。然而，这并没有发生。相反，我得到的是一个错误：

跨域请求被阻止：同源策略不允许读取 http://localhost:8080/rrm/api/v1/goals 的远程资源。（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

我的网络日志如下所示：

我的死简单Angular2代码如下：

export class AppComponent implements OnInit {

  goals: Object[];

  constructor(public authHttp: AuthHttp) {}

  ngOnInit():any {
    this.getGoals();
  }

  getGoals() {
    this.authHttp.get('http://localhost:8080/rrm/api/v1/goals')
        .subscribe(
            data => this.goals = data.arrayBuffer(),
            err => console.log('Error ', err),
            () => console.log('Request Complete')
        );
  }
}

我错过了什么？我没有在服务器上收到options 请求，我在浏览器中也看不到它...

谢谢，

【问题讨论】：

你必须在服务器端启用CORS。
这是什么意思，我必须在服务器端启用它？我什至没有收到服务器端的请求......它与服务器端有什么关系？
techblog.constantcontact.com/software-development/…

标签： angularjs cors angular

【解决方案1】：

其实CORS主要有两种情况：

简单请求。如果我们使用 HTTP 方法 GET、HEAD 和 POST，就属于这种情况。对于POST 方法，仅支持具有以下值的内容类型：text/plain、application/x-www-form-urlencoded、multipart/form-data。即使您在这种情况下，并且如果您使用自定义标头（您自己在请求中定义的标头），您也会陷入预检请求。
预检请求。如果不是简单请求，则会执行第一个请求（使用 HTTP 方法 OPTIONS）以检查在跨域请求的上下文中可以执行的操作。

就您而言，您属于第一种情况（简单请求）。

此外，您的 GET 请求应在其响应中定义一个 Access-Control-Allow-Origin 标头，以免出现错误。这将允许浏览器确定您（例如 localhost:3000）是否能够执行请求。

您可能会对这篇文章感兴趣：

http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

【讨论】：

【解决方案2】：

OPTIONS 仅在每个 POST 请求之前发送。对于GET 请求，仅当您具有自定义标头（如 auth-headers）时才会发送 OPTIONS 预检请求。

另见Why am I getting an OPTIONS request instead of a GET request?

【讨论】：