Question

正面（角度2）

public googlesearch(ev:Event){
    this.http.get("https://maps.googleapis.com/maps/api/place/autocomplete/json?input="+ev.target.value+"&types=establishment&key=AIzaSyAKdEt_dYbdPY-CFo0zie23E44XxTQc1n7").map(res => $.parseJSON(res)).subscribe( data => {
      this.predictions = data.predictions;
      console.log(this.predictions);
     },(error) =>{ 
       alert('Not able to get')
      } )


      }

节点（Express 4.14）

var app = express();
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

但我收到了CORS错误

无法加载 https://maps.googleapis.com/maps/api/place/autocomplete/json?input=loc&types=establishment&key=AIzaSyAKdEt_dYbdPY-CFo0zie23E44XxTQc1n8： No＆＃39; Access-Control-Allow-Origin＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost:3000＆＃39;因此是不允许的访问。

并且在npm控制台上也没有收到任何请求。

Answer 1

该标题必须由目标网址服务器https://maps.googleapis.com/设置。在您的服务器上设置标题将无济于事。

但是，你可以 -

找到一个允许来自浏览器调用的合适API。
在您的服务器上实现该网址的代理，并从浏览器中调用它。

Answer 2

有一个api用于以更清洁的方式做到这一点通过脚本标记导入谷歌地图api

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initService"
    async defer></script>

现在从自动填充API声明一项服务

function initService(){
   autoService = new google.maps.places.AutocompleteService();
}

在您的活动中，听众只需这样做

autoService.getQueryPredictions({ input: event.target.value }, displaySuggestions);

关注完整示例https://developers.google.com/maps/documentation/javascript/examples/places-queryprediction

修改

如果您想通过快递应用程序进行操作，那么就会有一个npm

https://www.npmjs.com/package/googleplaces

为什么从app.js设置后出现cors错误

因为在前端您使用maps.google.com网址调用http服务获取方法，所以此处浏览器不会联系您的服务器，它将直接转到谷歌服务器尝试检索内容在这种情况下，你在app.js中的配置是无用的，除非你在angular中定义代理。

CORS错误Angular 2 + Express Node

2 个答案: