Пытаясь понять, почему простой угловой 2 http.get() не работает на localhost

Question

Попытка понять, почему такой простой вызов rest api не работает с localhost (используя angular-cli).

Это сервисный код:

commandsUrl ='http://www.mocky.io/v2/...';
  headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
  options = new RequestOptions({ headers: this.headers, withCredentials: true });

  getMyList (): Observable<any> {
    return this.http.get(this.commandsUrl, this.options)
      .map(this.extractData)
      .catch(this.handleError);

  }
  private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }
  private handleError (error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

Ошибка из браузера:

XMLHttpRequest не может загрузить http://www.mocky.io/v2/... Ответ на предварительный запрос не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Источник ' http://localhost:4200/', следовательно, не имеет доступа.

Answer 1

Вы должны прочитать о CORS. Перед отправкой вашего реального AJAX-запроса, GET, отправляется запрос OPTIONS, и сервер должен ответить заголовками "Access-Control-Allow-Origin", которые дают вам разрешение на доступ к нему.

То есть сервер по адресу http://www.mocky.io/v2/... должен быть настроен для приема запросов CORS от вашего сервера (или с использованием подстановочного знака)

https://www.html5rocks.com/en/tutorials/cors/