我正在尝试用角度6实现谷歌地方模型列表与材料，我打电话给谷歌的地方API，但我得到如下的CORS问题，
无法加载https://maps.googleapis.com/maps/api/place/autocomplete/json?input=hy&language=en对预检请求的响应不允许't pass access control check: No ' Access-Control-Allow-Origin ' header is present on the requested resource. 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安全功能和一些扩展我们可以避免这个问题 . 由于我的应用程序将进入 生产环境 ，我想通过代码解决这个问题 .
任何解决方案将不胜感激 .
1 回答
是的，这是一个CORB问题，与CORS不同，只是设置 Headers ，将返回如下错误：
CORS策略阻止了对“https://maps.googleapis.com/maps/api/geocode/json?address=407%20N.%205th%20Ave.,%20Ann%20Arbor,%20MI,%2048104&key=AIzaSyBZAcZpANtMgkAuelnkHK1WkImpBECm4WY ' from origin ' http://localhost:4200”的XMLHttpRequest的访问：请求头字段在预检响应中，Access-Control-Allow-Header不允许使用Access-Control-Allow-Origin .
我've been looking for a clear answer on this, the closest I'来了使用像///
<reference types="@types/googlemaps" />这样的参考标签，即使它不起作用，虽然它满足了错误，谷歌仍然由于某种原因未定义，如果你取得任何进展让我知道 .