请求 http.GET 时发送 Angular2 OPTIONS 方法 [重复]

Question

我正在尝试将 basic authentification 添加到我的 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)
    );
}

我希望看到的是带有 Authorizationheader 的 GET 请求。

但我首先看到的是带有此标题的 OPTIONS：

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

由于我的服务器不允许在此网址上使用 OPTIONS，因此我收到错误消息。

我知道像 PUT 或 POST 这样的一些方法首先发送一个 OPTIONS 方法来预检请求，但 GET 没有。

为什么angular2的http会先发送一个OPTIONS？

谢谢。

Answer 1

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

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

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

发送 OPTIONS 请求的不是 Angular2，而是浏览器本身。这与 Angular 无关。

更多详情，你可以看看这篇文章：

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

Answer 2

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

这是由浏览器本身生成的 CORS 预检请求。

另见
- How to disable OPTIONS request?

需要将服务器配置为支持CORS请求，只有在OPTIONS请求之后，浏览器才会发送实际的GET请求。

另见
- "No 'Access-Control-Allow-Origin' header is present on the requested resource" - https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

访问控制允许凭据

指示当凭证标志为真时是否可以公开对请求的响应。当用作对预检请求的响应的一部分时，这表明是否可以使用凭证发出实际请求。请注意，简单的 GET 请求不会被预检，因此如果对具有凭据的资源发出请求，如果此标头未与资源一起返回，则响应将被浏览器忽略并且不会返回到 Web 内容。