Search code examples
javascriptfetchgithub-pagesopenweathermapunexpected-token

Error when fetching data from OpenWeatherMap while hosting on Github Pages

I am pretty new to coding and I wanted to code a weather website. So I am using the OpenWeatherMap API.

Everytime I wanna fetch the data from this API, I am getting the following error: https://i.sstatic.net/ZcBFx.png

It seems like my code is conflicting with the code of github pages, because when I check where exactly the error is occurring, I noticed it is partially not in my code:

My Code:

 // 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 Code:

<!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>

I am gonna link my code and the webpage here: Code from Github - The Website

To recreate the error, you have to get your Position first, because you cannot fetch the weatherdata without a location. After you clicked the "get position"-Button, you have to "check weather". The error happens right then.

I already checked the .JSON file for any wrong characters or if anything is not working like it should be.

It is completely working on my local server, so it has to be a problem with github pages, but I really can't figure out what it is.

Solution

  • After visiting the site and checking the weather, I noticed something in the error that might help:

    GET https://dafinndus.github.io/api.openweathermap.org/data/2.5/forecast?lat=45.5202471&lon=-122.674194&appid=6b73bc848d05bdb699cf0cfb49adf6f6&units=metric&lang=en 404

    When expanding the error to see the full URL, it looks like your own site's address is being added to the string. Then looking closer at the code, I think it could be as simple as missing a / in the URL: it should be https://api.openweather...... I hope it's that straightforward!

    My guess is that when the request sees the single slash it's assuming you want to look at a subdirectory of the current domain.