HTML中的JavaScript可在本地使用，但不能在部署到服務器時使用

我一直在構建一個Web應用程序，昨天我嘗試向其中添加一些天氣數據。我構建了這個簡短的HTML文檔，它在瀏覽器中查看時非常完美。但是，今天我部署到Zeit和Firebase主機，但JavaScript未能執行並且什麼也沒有發生。正如你在這裏看到的（http://imgur.com/a/TFnEi），沒有任何錯誤。我該如何解決這個問題？HTML中的JavaScript可在本地使用，但不能在部署到服務器時使用

<!DOCTYPE html> 
<html> 

<head> 
    <title>Display Weather</title> 
</head> 

<body> 
    <style> 
    h1{ 
    font-family: Arial; 
    margin:auto; 
    } 
    p{ 
    font-family: Arial; 
    margin:auto; 
    } 
    img{ 
     border: 2px solid blue; 
     border-radius: 10px; 
     } 
    </style> 
    <h1> Current weather in Berlin: </h1> 
    <p id="forecast_metric">Gathering data...</p> 
    <p id="temp_c">Gathering data...</p> 
    <p id="WIP">No data</p> 
    <p id="weathercond">Gathering data...</p> 
    <p id="visibility">Gathering data...</p> 
    <p id="updated">Gathering data...</p> 
    <img id="weathericon" src="test.png"> 
    <script> 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', "http://api.wunderground.com/api/APIKEY/conditions/forecast/q/Germany/Berlin.json", true); 
    xhr.send(); 

    xhr.onreadystatechange = processRequest; 

    function processRequest(e) { 
    if (xhr.readyState == 4 && xhr.status == 200) { 
     var response = JSON.parse(xhr.responseText); 

     var temp_c = response.current_observation.temp_c 
     var weathercond = response.current_observation.weather 
     var weathericon = response.current_observation.icon_url 
     var updated = response.current_observation.observation_time 
     var visibilitykm = response.current_observation.visibility_km 

     alert('The temperature is ' + temp_c + ' degrees Celsius in Berlin right now. The Forecast for ' + response.forecast.txt_forecast.forecastday[1].title + ' is : ' + response.forecast.txt_forecast.forecastday[1].fcttext_metric); 
     document.getElementById("forecast_metric").innerHTML = "The current forecast for today is: " + response.forecast.txt_forecast.forecastday[1].fcttext_metric 
     document.getElementById("temp_c").innerHTML = "Temperature: " + temp_c + " degrees Celsius" 
     document.getElementById("weathercond").innerHTML = "Weather: " + weathercond 
     document.getElementById("visibility").innerHTML = "Visibility: " + visibilitykm + " km" 
     document.getElementById("updated").innerHTML = updated 
     document.getElementById("weathericon").src = weathericon; 
    } 

    } 

    </script> 

</body> 

</html>

編輯：我發現這個問題 - 在瀏覽器不接受HTTP和HTTPS要求，而不是。儘管感謝您的答案！

來源

2017-01-23 A. Cat

顯示在控制檯中的任何東西？你從API獲取了什麼東西，還是在那個時候掛？ – Snowmonkey

究竟是在部署的應用程序中的端點返回？ – Kejt

它工作正常 - 一切工作在我的Mac - –

-2

這只是一個猜測 - 但也許它是你的APIKEY這是從域無效？

http://api.wunderground.com/api/APIKEY

打開Chrome的開發者控制檯，它可能對你有所幫助！

見https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading

當我與一個不正確的APIKEY打開它我得到：

{ 
    "response": { 
    "version":"0.1", 
    "termsofService":"http://www.wunderground.com/weather/api/d/terms.html", 
    "features": { 
    } 
     , 
    "error": { 
     "type": "keynotfound" 
     ,"description": "this key does not exist" 
    } 
    } 
}

要看到，如果這是你的問題，打開DEV控制檯中，單擊XHR選項卡上，如果你收到與上面相同或相似的響應 - 您的APIKEY無效。

我希望這有助於！

來源

2017-01-23 16:47:12

一個猜測不是答案，恕我直言 – ADyson

你是對的 - 新 - 學習規則:) –

插入你自己的密鑰 - 它插入時，它不工作 –

HTML中的JavaScript可在本地使用，但不能在部署到服務器時使用

回答

相關問題