Angular 6 Yelp Fusion API GET-запрос
Итак, в настоящее время я изучаю, как делать запросы 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/» перед Yelp GET URL, это не сработает, и я получу эту ошибку в консоли. Почему это? Извините, я новичок в этом.
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
Это типичная проблема CORS, которую вы обычно получаете. CORS - это политика на основе браузера, которая не разрешает совместное использование ресурсов между источниками. Чтобы разрешить это:
- Запрашивающий домен должен быть внесен в белый список на стороне API.
- Или запрошенный API должен быть получен через прокси-сервер.
- Или есть несколько других способов решения этой проблемы, которые выходят за рамки этого ответа.
Предыдущий сегмент URL-адреса (https://corsanywhere.herokuapp.com/), кажется, делает именно это. По сути, он действует как прокси между вашим приложением Angular и Yelp API (Случай 2).
Поскольку CORS - это политика на основе браузера, и вы обращаетесь к YELP API через corsanywhere, который действует как прокси, вы не получаете проблемы с CORS.