Проблема предварительной проверки CORS в приложении Angular 7 - заголовки ответа игнорируются - PullRequest
Новая
       31

Проблема предварительной проверки CORS в приложении Angular 7 - заголовки ответа игнорируются

0 голосов
/ 20 декабря 2018

Это вызывает у меня некоторые проблемы некоторое время.У меня настроен набор apis - когда я делаю POST-запрос к ним, я получаю все необходимые заголовки ответа в почтальоне. 

Access-Control-Allow-Credentials →true
Access-Control-Allow-Headers →*
Access-Control-Allow-Methods →GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin →*

Однако мой базовый http.post терпит неудачу в моем приложении Angular в качестве отправляющегов предварительном запросе OPTIONS.Но ответ, кажется, не складывается правильно.Вот заголовки отправленного запроса и полученный в консоли ответ:

REQUEST 

Host: ...
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:62.0) Gecko/20100101 Firefox/62.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,ur;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: http://localhost:4200
Connection: keep-alive

RESPONSE 

HTTP/1.1 401 Unauthorized
Server: nginx/1.15.7
Date: Thu, 20 Dec 2018 15:45:49 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 61
Connection: keep-alive
X-Powered-By: Express
ETag: W/"3d-q6cGyOBiwGshxQdcFRrR1zCi7Cw"

Сообщение об ошибке в консоли: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Но это не так - сервер настроен на отправку всех правильных заголовков.

Вот мой код: 

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json' })
};

...

  login(email:string, password:string){
    var url = environment.url;

    let data = {email:email, password:password};

    let response = this.http.post(url, (data), httpOptions);
    return response;
  }

Мне нужно отправить данные какТип содержимого application / json плюс все необходимые заголовки настроены на сервере.Так в чем же здесь проблема?

Ответы [ 3 ]

0 голосов
/ 20 декабря 2018

Запрос OPTIONS не связан с Angular, он запускается вашим браузером, поскольку вы обращаетесь к ресурсу из другого домена.

Таким образом, решение заключается в добавлении заголовков Access-Control в OPTIONS глагол на вашем сервере Express, так как они не присутствуют в вставленных вами заголовках ответа.

0 голосов
/ 20 декабря 2018

Ваш ответ сервера был: 

HTTP/1.1 401 Unauthorized
Server: nginx/1.15.7
Date: Thu, 20 Dec 2018 15:45:49 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 61
Connection: keep-alive
X-Powered-By: Express
ETag: W/"3d-q6cGyOBiwGshxQdcFRrR1zCi7Cw"

Вы написали

... это не так - сервер настроен на отправку всех правильных заголовков .

Что ясно показывает, что вы написали недопустимо.

В вашем ответе сервера отсутствует заголовок: 

Access-Control-Allow-Origin: *

Что сделает ваше утверждение действительнымеще раз.

0 голосов
/ 20 декабря 2018

Какой у вас Angular бегущий URL?http://localhost:4200?А ваш адрес конечной точки API?«Перекрестный запрос заблокирован» означает, что запрос http отправлялся по неавторизованному URL-адресу (иногда ваш локальный угловой адрес dev является localhost, но API - это другой домен, например: http://firebase/api., в этом случае API обрабатывает ваш localhostнеавторизованный домен).Для этой проблемы вам нужно настроить CORS вашего API, чтобы разрешить прием HTTP-запроса от вашего локального хоста.Надеюсь, что смогу помочь, спасибо за любой вклад.

...