CORS проблема при вызове Google Места API в угловых 6 с материалом - PullRequest
Новая
       8

CORS проблема при вызове Google Места API в угловых 6 с материалом

0 голосов
/ 18 октября 2018

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

Не удалось загрузить https://maps.googleapis.com/maps/api/place/autocomplete/json?input=hy&language=en Ответчтобы предполётный запрос не прошел проверку контроля доступа: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin».Поэтому для источника 'localhost: 4200' доступ запрещен.

мой код подобен приведенному ниже, 

<mat-form-field>
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedUserPlace($event)">
          <mat-option *ngFor="let place of listOfPlaces" [value]="place.description">
            {{place.description}}
          </mat-option>
        </mat-autocomplete>
        <input type="text" aria-label="Number" required (input)="getUserPLaces($event.target.value)" matInput 
           [matAutocomplete]="auto">
<mat-form-field>

getUserPLaces(value: any) {
    this.searchLocationService.loadUserPlaces(value, this.latitude, this.longitude).subscribe(
      (data) => {
        this.listOfPlaces = data['predictions'];
      }
    );
  }

loadUserPlaces(key, latitude, longitude){
    return this.httpClient.get(`https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${key}&language=en`);
  }

Как решить проблему с ядрами, я знаю, что, отключив функции безопасности Chrome и некоторые другиеРасширения мы можем избежать этой проблемы.Поскольку мое приложение будет запущено в производство, и я хочу решить эту проблему с помощью кода.

Будем благодарны за любые решения.

1 Ответ

0 голосов
/ 26 октября 2018

Да, это проблема CORB, которая отличается от CORS, просто установка заголовка вернет ошибку, подобную этой:

Доступ к XMLHttpRequest в «https://maps.googleapis.com/maps/api/geocode/json?address=407%20N.%205th%20Ave.,%20Ann%20Arbor,%20MI,%2048104&key=AIzaSyBZAcZpANtMgkAuelnkHK1WkImpBECm4WY' от источника» http://localhost:4200' было заблокировано политикой CORS: поле заголовка запроса Access-Control-Allow-Origin не разрешено Access-Control-Allow-Headers в ответе перед полетом.

Я искал четкоеответ на этот вопрос, самое близкое, что я получил, это использование ссылочного тега, такого как /// <reference types="@types/googlemaps" />, и даже это не работает, хотя и исправляет ошибки, Google по-прежнему не определен по какой-то причине. Если вы добьетесь прогресса, дайте мне знать,

...