Angular2 Метод OPTIONS отправлен при запросе http.GET

Я пытаюсь добавить базовую аутентификацию в мое приложение 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)
    );
}

То, что я ожидаю увидеть, - это запрос GET с заголовком Authorization, который я поставил.

Но я вижу сначала 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

Поскольку мой сервер не разрешает ОПЦИИ на этом URL-адресе, я получаю сообщение об ошибке.

Я знаю, что некоторые методы, такие как PUT или POST, сначала отправляют метод OPTIONS для предполетного запроса, но GET этого не делает.

Почему angular2 http сначала отправляет ВАРИАНТЫ?

Спасибо.

Ответы

Ответ 1

Так работает CORS (при использовании кросс-доменных запросов). С помощью CORS удаленное веб-приложение (здесь одно с доменом mydomain.org) выбирает, может ли запрос быть подан благодаря набору определенных заголовков.

Спецификация CORS различает два различных варианта использования:

  • Простые запросы. Этот вариант использования применяется, если мы используем методы HTTP GET, HEAD и POST. В случае методов POST поддерживаются только типы контента со следующими значениями: text/plain, application/x-www-form-urlencoded и multipart/form-data.
  • Предварительно запрошенные запросы. Когда применяется "простой запрос на использование запроса", первый запрос (с помощью метода HTTP OPTIONS) сделан для проверки того, что можно сделать в контексте междоменных запросов.

Это не Angular2, который отправляет запрос OPTIONS, но сам браузер. Это не связано с Angular.

Для более подробной информации вы можете ознакомиться с этой статьей:

Ответ 2

Почему я получаю запрос OPTIONS вместо запроса GET?

Это запрос предварительной проверки CORS, который генерируется самим браузером.

См. также
- Как отключить запрос OPTIONS?

Сервер должен быть настроен для поддержки запросов CORS, только тогда фактический запрос GET отправляется браузером после запроса OPTIONS.

См. также
- "Нет" Access-Control-Allow-Origin 'заголовок присутствует в запрошенном ресурсе" - https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Access-Control-Allow-Credentials

Указывает, может ли отображаться ответ на запрос, когда флаг учетных данных является истинным. При использовании в качестве части ответа на запрос предполетной проверки это указывает, можно ли сделать фактический запрос с использованием учетных данных. Обратите внимание, что простые запросы GET не предваряются, поэтому, если запрос выполняется для ресурса с учетными данными, если этот заголовок не возвращается ресурсом, ответ игнорируется браузером и не возвращается к веб-контенту.