Угловой 6 Yelp Fusion API GET Запрос - PullRequest
Новая
       15

Угловой 6 Yelp Fusion API GET Запрос

0 голосов
/ 19 сентября 2018

Итак, в настоящее время я учусь делать запросы API и Angular 6, и я получил свой HTTP-запрос Get к Yelp Fusion Api, но я не совсем понимаю одну строчку, где я скопировал из аналогичного примера онлайн для работы.

private configUrl: string = "https://corsanywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?location=boston&term=steak";

constructor(private http: HttpClient) {}

sendHttpRequest() {
  const headers = new HttpHeaders().set("Authorization", "Bearer MyApiKey");
  return this.http.get<JSON>(this.configUrl, {
    headers
  });
}

Если я удаляю «https://corsanywhere.herokuapp.com/" перед URL YELP GET, он не работает, и я получаю эту ошибку в консоли. Почему это происходит? Извините, яНовое в этом. 

OPTIONS https://api.yelp.com/v3/businesses/search?location=boston&term=steak 403 ()
Failed to load https://api.yelp.com/v3/businesses/search?location=boston&term=steak: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

1 Ответ

0 голосов
/ 19 сентября 2018

Это типичная проблема CORS, которую вы обычно получаете.CORS - это политика на основе браузера , которая не допускает обмен ресурсами между источниками.Чтобы разрешить это:

  1. Запрашивающий домен должен быть либо внесен в белый список на стороне API.
  2. Или запрошенный API должен быть получен через прокси-сервер.
  3. Или есть несколько других способов решения этой проблемы, которые выходят за рамки этого ответа.

Предыдущий сегмент URL (https://corsanywhere.herokuapp.com/), как кажется, делает именно это.По сути, он действует как прокси между вашим Angular App и Yelp API ( Case 2 ).

Поскольку CORS - это политика на основе браузера, и вы используете API YELP через corsanywhere, который действует как прокси-сервер, проблема CORS не возникает.

...