使用材料在角度 6 中调用 google 地方 API 的 CORS 问题

Question

我正在尝试使用材料在 Angular 6 中实现 google Places 模型列表，我正在调用 google Places API，但我遇到了如下所示的 CORS 问题，

无法加载https://maps.googleapis.com/maps/api/place/autocomplete/json?input=hy&language=en 对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 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`);
  }

如何在这里解决 cors 问题，我知道通过禁用 chrome 安全功能和一些扩展，我们可以避免这个问题。由于我的应用程序将投入生产，我想通过代码解决这个问题。

任何解决方案将不胜感激。

Answer 1

是的，是CORB问题，和CORS不同，只是设置了header，会返回如下错误：

从源“http://localhost:4200”对“https://maps.googleapis.com/maps/api/geocode/json?address=407%20N.%205th%20Ave.,%20Ann%20Arbor,%20MI,%2048104&key=AIzaSyBZAcZpANtMgkAuelnkHK1WkImpBECm4WY”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin .

我一直在寻找一个明确的答案，我最接近的是使用像 /// <reference types="@types/googlemaps" /> 这样的参考标签，即使这样也不起作用，虽然它可以满足错误，但谷歌仍然未定义出于某种原因，如果您取得任何进展，请告诉我。