CORS误差角2 + EXPRESS节点

前侧（角2）CORS误差角2 + EXPRESS节点

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') 
     }) 


     }

节点（快速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：否“访问控制允许来源”标题上存在所请求的资源。原因'http://localhost:3000'因此不允许访问。

而且也没有得到在NPM控制台的任何请求。

来源

2017-10-15 mukund patel

这头必须在你的情况下，目标URL服务器，https://maps.googleapis.com/设置。在服务器上设置标题将无济于事。

就可以了，however-

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

来源

2017-10-15 17:55:23 awd

请解释一下。 –

没有做它在一个更清洁的方式通过脚本标签从自动完成API

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

导入谷歌地图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而在你的事件监听器只是这样做

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

按照为全面例如https://developers.google.com/maps/documentation/javascript/examples/places-queryprediction

编辑

如果你想从你的Express应用程序做有它

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

由于在前端你所以这里调用你的maps.google.com网址http服务get方法绝不浏览器会联系你的服务器时，它会直接进入到谷歌的服务器尝试检索内容，以便你的app.js中的配置在这种情况下是无用的，除非你定义了一个代理角色。

来源

2017-10-15 18:13:33 douxsey

我该如何使用自己的不同服务器服务？ –

你想要什么？你想表达的请求谷歌的API，所以你可以从角控制器调用你自己的服务，这一个叫googleApi – douxsey

我想知道原因，为什么在服务器app.js启用Cors后，我无法得到回应。前端有什么拒绝吗？ –

CORS误差角2 + EXPRESS节点

回答

相关问题