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

查看:14
本文介绍了请求 http.GET 时发送的 Angular2 OPTIONS 方法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将 基本身份验证 添加到我的 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)
    );
}

我希望看到的是带有 Authorization 标头的 GET 请求.

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.GET 时发送的 Angular2 OPTIONS 方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆