在请求http.GET时发送Angular2 OPTIONS方法 [英] Angular2 OPTIONS method sent when asking for http.GET

问题描述

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

I'm trying to add basic authentification to my angular2 app.

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)
    );
}

我期望看到的是带有授权我放的标题。

What I expect to see is a GET request with the Authorizationheader I put.

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

But what I see is first a OPTIONS with this headers:

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 ，因此出现错误。

Since my server doesn't allow OPTIONS on this url, I get an error.

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

I know that some methods like PUT or POST send first an OPTIONS method to preflight the request, but GET doesn't.

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

Why does angular2's http send a OPTIONS first?

谢谢。

推荐答案

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

This is the way CORS works (when using cross domain requests). With CORS, the remote Web application (here the one with domain mydomain.org) chooses if the request can be served thanks to a set of specific headers.

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

The CORS specification distinguishes two distinct use cases:

• 简单请求。如果我们使用HTTP GET，HEAD和POST方法，则此用例适用。对于POST方法，仅支持具有以下值的内容类型：text / plain，application / x-www-form-urlencoded和multipart / form-data。


• 预检请求。当简单请求用例不适用时，会发出第一个请求（使用HTTP OPTIONS方法），以检查在跨域请求的上下文中可以执行的操作。

• Simple requests. This use case applies if we use HTTP GET, HEAD and POST methods. In the case of POST methods, only content types with the following values are supported: text/plain, application/x-www-form-urlencoded and multipart/form-data.
• Preflighted requests. When the ‘simple requests’ use case doesn’t apply, a first request (with the HTTP OPTIONS method) is made to check what can be done in the context of cross-domain requests.

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

It's not Angular2 that sends the OPTIONS request but the browser itself. It's not something related to Angular.

有关详细信息，请查看此文章：

For more details, you could have a look at this article:

• http://restlet.com/blog/2015/ 12/15 /理解和使用cors /

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

这篇关于在请求http.GET时发送Angular2 OPTIONS方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！