Я создал свой api/product-search.php бэкэнд в http://localhost/ вот так:

<?php
header('Access-Control-Allow-Origin', '*');
header("Access-Control-Allow-Headers: Content-Type");
header("Access-Control-Request-Headers: *");
header("Access-Control-Request-Method", "GET, POST, PUT, DELETE, OPTIONS");
Header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
header('Content-type: application/json');
$myObj->name = "Test Product";
$myObj->qty = 30;
$myObj->sku = "test-p";

$myJSON = json_encode($myObj);

echo $myJSON; echo PHP_EOL;
foreach (getallheaders() as $name => $value) {
    echo "$name: $value\n";
}
?>

Используя Angular HttpClient из http: // localhost: 4200 / вот так:

getProducts(): Observable<any>  {
    return this.http.get(`http://localhost/api/product-search.php`, this.setHttpHeader());
  }

  private setHttpHeader() {
    const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Access-Control-Request-Headers', '*')
      .set('Access-Control-Request-Origin', '*');
    const options = { headers: headers };
    return options;
  }

ngOnInit() {
this.getProducts().subscribe(
  response => {
    // alert('Response');
    console.log(response);
  },
  error => {
    // alert('Error');
    console.log(error);
  }
);

}

Когда я проверяю консоль, я получаю следующую ошибку: Угловой запрос HttpClient

Когда я просматриваю вкладку «Сеть», я получаю 200 ОК, вот так: Вкладка "Сеть браузера"

Я также могу успешно завить:

curl -i http://localhost/api/product-search.php
HTTP/1.1 200 OK
Date: Mon, 09 Dec 2019 15:16:37 GMT
Server: Apache/2.4.34 (Unix) PHP/7.1.23
X-Powered-By: PHP/7.1.23
Access-Control-Request-Headers: *
Access-Control-Allow-Origin: *
Content-Length: 100
Content-Type: application/json

{"name":"Test Product","qty":30,"sku":"test-p"}
Host: localhost
User-Agent: curl/7.54.0
Accept: */*

В Chrome: Браузер Google Chrome

Похоже, что вызов выполняется успешно во многих отношениях, насколько это могут сказать вкладка «Сеть», Curl и браузер, а с Angular http.js это не так, и я не уверен, почему.

Заранее спасибо!

0
user12505305 9 Дек 2019 в 18:24
Можешь показать ошибку?
 – 
Chanaka Weerasinghe
9 Дек 2019 в 18:28
Ты подписываешься на свой ответ с сервера? getProducts (). subscribe ((значение) => {// пустышка})
 – 
Alann
9 Дек 2019 в 18:28
1
Да обновил это в вопросе
 – 
user12505305
9 Дек 2019 в 18:35
Просмотр документации MDN дал никаких результатов для "Access-Control-Request-Origin". Возможно, вы имели в виду Access-Control-Allow-Origin, который можно установить только на бэкэнде / сервере, а не на клиенте (как указано в предыдущей ошибке)?
 – 
Edric
9 Дек 2019 в 18:45
Кроме того, рассмотрите возможность копирования и вставки журнала ошибок вместо того, чтобы прикреплять его снимок экрана, чтобы его было легче найти для пользователей с плохим подключением к Интернету.
 – 
Edric
9 Дек 2019 в 18:47

2 ответа

Это потому, что вы случайно установили Заголовок запроса Access-Control-Allow-Origin как Access-Control-Request-Origin, который является недопустимым заголовок запроса:

private setHttpHeader() {
    const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Access-Control-Request-Headers', '*')
      .set('Access-Control-Request-Origin', '*'); // Over here! (It should be Access-Control-Allow-Origin)
    const options = { headers: headers };
    return options;
}

Также обратите внимание, что вы не можете установить заголовки запроса от клиента - они должны быть установлены только на сервере / бэкэнде.

0
Edric 9 Дек 2019 в 18:52
Спасибо, но все равно не удалось применить ваше предложение.
 – 
user12505305
9 Дек 2019 в 19:00

Нашел недостающий кусок пазла. Я добавил цепочку методов pipe() в метод getProducts следующим образом:

getProducts(): Observable<any>  {
    return this.http.get(`http://localhost/api/product-search.php`, this.setHttpHeader()).pipe(
      tap(_ => this.log(`found fitters matching `)),
      catchError(this.handleError<Product[]>('getPosition', []))
    );;
  }

И это возвращает ответ от Angular Application.

0
user12505305 9 Дек 2019 в 19:33