部署在GitHub Pages调用OpenWeatherMap API时出现数据获取错误

我是编程新手，正在开发一个天气网站，通过OpenWeatherMap API实现数据获取。本地服务器运行完全正常，但部署到GitHub Pages后，每次点击「获取位置」再点击「查看天气」时，都会出现数据获取错误（错误截图：）。我发现错误似乎与GitHub Pages的代码存在冲突，以下是我的代码和GitHub Pages返回的404页面代码：

我的代码 #

// Fetches the weather data with the given url
    function fetchWeather() {
        if (positionError(lat, lon)) {
            let weatherURL = "https:/api.openweathermap.org/data/2.5/forecast?lat=" + lat + "&lon=" + lon + "&appid=" + apiKey + "&units=metric&lang=en";

            try {
                fetch(weatherURL)
                    .then(response => response.json())
                    .then(data => {
                        if (data["city"] !== undefined) {
                            console.log(weatherURL);
                        } else {
                            alert("Cannot fetch data for the given lat and lon values!");
                        }
                    });
            } catch (e) {
                console.error("Can't fetch url for weather!");
            }
        }
    }

GitHub Pages返回的404页面代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; connect-src 'self'">
    <title>Site not found &middot; GitHub Pages</title>
    <style type="text/css" media="screen">
      body {
        background-color: #f1f1f1;
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      .container { margin: 50px auto 40px auto; width: 600px; text-align: center; }

      a { color: #4183c4; text-decoration: none; }
      a:hover { text-decoration: underline; }

      h1 { width: 800px; position:relative; left: -100px; letter-spacing: -1px; line-height: 60px; font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
      p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }

      ul { list-style: none; margin: 25px 0; padding: 0; }
      li { display: table-cell; font-weight: bold; width: 1%; }

      .logo { display: inline-block; margin-top: 35px; }
      .logo-img-2x { display: none; }
      @media
      only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (   min--moz-device-pixel-ratio: 2),
      only screen and (     -o-min-device-pixel-ratio: 2/1),
      only screen and (        min-device-pixel-ratio: 2),
      only screen and (                min-resolution: 192dpi),
      only screen and (                min-resolution: 2dppx) {
        .logo-img-1x { display: none; }
        .logo-img-2x { display: inline-block; }
      }

      #suggestions {
        margin-top: 35px; color: #ccc;
      }
      #suggestions a {
        color: #666666; font-weight: 200; font-size: 14px; margin: 0 10px;
      }

    </style>
  </head>
  <body>

    <div class="container">

      <h1>404</h1>
      <p><strong>There isn't a GitHub Pages site here.</strong></p>

      <p>
        If you're trying to publish one,
        <a href="https://help.github.com/pages/">read the full documentation</a>
        to learn how to set up <strong>GitHub Pages</strong>
        for your repository, organization, or user account.
      </p>

      <div id="suggestions">
        <a href="https://githubstatus.com">GitHub Status</a> &mdash;
        <a href="https://twitter.com/githubstatus">@githubstatus</a>
      </div>

      <a href="/" class="logo logo-img-1x">
        <img width="32" height="32" title="" alt="" src="">
      </a>

      <a href="/" class="logo logo-img-2x">
        <img width="32" height="32" title="" alt="" src="">
      </a>
    </div>
  </body>
</html>

我已检查过JSON文件无异常，仓库链接：Sunchecker仓库，站点链接：部署后的天气网站，恳请帮忙排查问题。

内容的提问来源于stack exchange，提问作者Finn Luca Jensen