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或插件未加载等）。默认显示被动混合内容，但用户也可以设置首选项来阻止此类内容。