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節點

回答

相關問題