在请求http.get[duplicate]时发送的Angular2选项方法

Question

我正在尝试添加基本身份验证到我的angular2应用程序。

public login() {
    // Set basic auth headers
    this.defaultHeaders.set('Authorization', 'Basic ' + btoa(this.username + ':' + this.password));

    console.log('username', this.username)
    console.log('password', this.password)
    console.log(this.defaultHeaders)

    // rest is copy paste from monbanquetapiservice
    const path = this.basePath + '/api/v1/development/order';        

    let req = this.http.get(path, { headers: this.defaultHeaders });
    req.subscribe(
        _ => { },
        err => this.onError(err)
    );
}

OPTIONS /api/v1/development/order HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36
Access-Control-Request-Headers: authorization, content-type
Accept: */*
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6,fr;q=0.4

为什么Angular2的http首先发送选项？

多谢了。

Answer 1

这就是CORS的工作方式（当使用跨域请求时）。对于CORS，远程Web应用程序（这里是域为mydomain.org的应用程序）选择是否可以通过一组特定的头来为请求提供服务。

CORS规范区分了两种不同的用例：

• 简单请求。如果我们使用HTTP GET、HEAD和POST方法，这个用例就适用。对于POST方法，只支持具有以下值的内容类型:text/plain、application/x-www-form-urlencoded和multipart/form-data。
• 预取请求。当“Simple Requests”用例不适用时，会发出第一个请求（使用HTTP OPTIONS方法），以检查在跨域请求上下文中可以执行的操作。

有关更多细节，您可以查看本文：

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