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

OPTIONS仅针对每个POST请求发送。对于GET个请求，只有在您拥有auth-header等自定义标头时才会发送OPTIONS预检请求。

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

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

2 个答案: