Openweathermap API在VS Code之外不起作用

Question

我仍然是API的新手，但对于我的生活，我无法弄清楚为什么这个应用程序在Visual Studio Code的实时服务器上查看它时工作正常，但在其他任何地方都不起作用！

我对编码仍然非常陌生，这是我第一次使用 API。是否需要创建 CRUD 操作？ 我在下面发布了js文件。

let appId = 'fa19585e62ed3b8595ff01cd2670cfd2'
let units = 'imperial'
let searchMethod;
function getSearchMethod(searchTerm) {
if(searchTerm.length === 5 && Number.parseInt(searchTerm) + "" === searchTerm)
searchMethod = 'zip'
else
searchMethod = 'q'
}
function searchWeather(searchTerm) {
getSearchMethod(searchTerm)
fetch(`http://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`).then(result => {
return result.json()
}).then(result => {
init(result)
})
}
function init(resultFromServer) {
switch (resultFromServer.weather[0].main) {
case 'Clear':
document.body.style.backgroundImage = 'url("clear.jpg")'
break;
case 'Clouds':
document.body.style.backgroundImage = 'url("cloudy.jpg")'
break;
case 'Rain':
case 'Drizzle':
case 'Mist':
document.body.style.backgroundImage = 'url("rain.jpg")'
break;
case 'Thunderstorm':
document.body.style.backgroundImage = 'url("storm.jpg")'
break;
case 'Snow':
document.body.style.backgroundImage = 'url("snow.jpg")'
break  
default:
break;
}
let weatherDescriptionHeader = document.getElementById('weatherDescriptionHeader')
let temperatureElement = document.getElementById('temperature')
let humidityElement = document.getElementById('humidity')
let windSpeedElement = document.getElementById('windSpeed')
let cityHeader = document.getElementById('cityHeader')
let weatherIcon = document.getElementById('documentIconImg')
weatherIcon.src = 'http://openweathermap.org/img/w/' + resultFromServer.weather[0].icon + '.png'
let resultDescription = resultFromServer.weather[0].description
weatherDescriptionHeader.innerText = resultDescription.charAt(0).toUpperCase() + resultDescription.slice(1)
temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '&#176 '
windSpeedElement.innerHTML = 'Wind at ' + Math.floor(resultFromServer.wind.speed) + ' m/s'
cityHeader.innerHTML = resultFromServer.name
humidityElement.innerHTML = 'Humidity levels at: ' + resultFromServer.main.humidity + '%'
setPositionForWeatherInfo()
}
function setPositionForWeatherInfo() {
let weatherContainer = document.getElementById('weatherContainer')
let weatherContainerHeight = weatherContainer.clientHeight
let weatherContainerWidth = weatherContainer.clientWidth
weatherContainer.style.left = `calc(50% - ${weatherContainerWidth/2}px)`
weatherContainer.style.top =  `calc(50% - ${weatherContainerHeight/1.3}px)`
weatherContainer.style.visibility = 'visible'
}
document.getElementById('searchBtn').addEventListener('click', () => {
let searchTerm = document.getElementById('searchInput').value
if(searchTerm)
searchWeather(searchTerm)
})

Answer 1

看起来您的代码可能会遇到一些问题，因为您请求

的数据超过HTTP而不是HTTPS

请参考以下MDN页面：

如果您的网站提供 HTTPS 页面，则默认情况下，此页面上通过 HTTP 传递的所有活动混合内容都将被阻止。因此，您的网站可能会对用户造成破坏(如果 iframe 或插件无法加载等(。默认情况下显示被动混合内容，但用户也可以设置首选项来阻止此类内容。

Answer 2

将searchWeather中的网址从http://api.openweathermap.org/...更改为https://api.openweathermap.org/...