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

Question

我在玩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请求，并且在浏览器中也看不到...

谢谢，

Answer 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/

Answer 2

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

另请参见为什么我收到OPTIONS请求而不是GET请求？