Google Places API в Angular Error: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin» - PullRequest
Новая
       6

Google Places API в Angular Error: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin»

0 голосов
/ 14 октября 2019

Я пытаюсь настроить приложение Angular, которое будет извлекать рестораны на основе поискового запроса и перечислять их названия, но я не могу заставить Google Places API работать в моем компоненте / службе Angular.

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

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RestaurantsApiService {
  API_KEY:string ="MYKEY";
  constructor(private httpClient: HttpClient) { }
  public getRestaurants(){
    return this.httpClient.get(`https://maps.googleapis.com/maps/api/place/textsearch/json?query=restaurants+in+Sydney&key=${this.API_KEY}`);
  }
}

А вот код моего компонента: 

import { Component, OnInit } from '@angular/core';
import { RestaurantsApiService } from '../restaurants-api.service';
@Component({
  selector: 'app-restaurants',
  templateUrl: './restaurants.component.html',
  styleUrls: ['./restaurants.component.css']
})
export class RestaurantsComponent implements OnInit {
  restaurantsResults;
  constructor(private restaurantsAPI: RestaurantsApiService) { }

  ngOnInit() {
    this.restaurantsAPI.getRestaurants().subscribe((data) => {
      console.log(data);
      this.restaurantsResults = data['results'];
    })
  }

}

И html моего компонента: 

<p>Restaurants:</p>
<div *ngFor="let restaurant of restaurantsResults">
    <h2>{{restaurant.name}}</h2>
    </div>

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

"Доступ к XMLHttpRequest по адресу" https://maps.googleapis.com/maps/api/place/textsearch/json?query=restaurants+in+Sydney&key=MYKEY' from origin "http://localhost:4200' былзаблокирован политикой CORS: на запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». "

Почему это происходит? Честно говоря, я делаю это для класса, где нам дали пример с другим API, и он работал отлично (получил JSON от API и отобразил нужную мне информацию), поэтому я не могу понять, почему этоодин не работает.

Я искал ответ, но большинство ответов не относятся к угловому и упоминают об использовании клиентского API, но я не понимаю, как это сделать для моих целей, так какэто API скрипты, когда для этого мне нужно собрать данные из файла JSON, который загружается в моем браузере без углов.

...