Openweathermap API 在 VS Code 之外无法工作

Question

我还是 API 的新手，但对于我的生活，我无法弄清楚为什么这个应用程序在实时服务器上以 Visual Studio 代码查看时运行良好，但在其他任何地方都行不通！

我还是编码新手，这是我第一次使用 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页面：

If your website delivers HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default. Consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). Passive mixed content is displayed by default, but users can set a preference to block this type of content, as well.

Openweathermap API 在 VS Code 之外无法工作

Openweathermap API won't work outside of VS Code

javascript

api

visual-studio-code

openweathermap