Hello, OnlineGDB Q&A section lets you put your programming query to fellow community users. Asking a solution for whole assignment is strictly not allowed. You may ask for help where you are stuck. Try to add as much information as possible so that fellow users can know about your problem statement easily.

Why am I getting a 'Failed to load resource: the server responded with a status of 500 ()' error

+6 votes
asked Aug 22, 2023 by Michael Barham (180 points)

I ran the following code in Visual Studio Code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JSON Giantess Data External</title>

</head>

<body>

<style>

#output {

        background-color:blue;

        font-family:Arial, Helvetica, sans-serif;

        font-size:16px;

        font-weight:bold;

}

</style>

    <div id="output" class="oput">Nothing</div>

<script>

    var myContainer = "";

    var a = new XMLHttpRequest();

       a.open("GET","https://api.jsonserve.com/Xljpml",true);

    //a.open("GET","data.json",true);

    a.onreadystatechange = function () {

        if (this.readyState == 4) {

            var obj = JSON.parse(this.responseText);

            for (i=0;i<obj.length;i++) {

            console.log(obj[i]);

            myContainer += obj[i].giantess + " is growing to be " + obj[i].height + "!!!" + "<br>";

            } //end for loop

            document.getElementById("output").innerHTML = myContainer;

            console.log(obj);

        }// end if

    }//end function

    a.send();       

</script>  

</body>

</html>

When I use the data.json file, I get the correct results(See line commented out).  However, when I try to call the external JSON file, https://api.jsonserve.com/Xljpml, I receive the following error messages...

AJAX_JSON.html:38     GET https://api.jsonserve.com/Xljpml 500
(anonymous) @ AJAX_JSON.html:38
VM123:1 Uncaught SyntaxError: Unexpected token 'I', "Internal S"... is not valid JSON
    at JSON.parse (<anonymous>)
    at a.onreadystatechange (AJAX_JSON.html:29:19)
a.onreadystatechange @ AJAX_JSON.html:29
XMLHttpRequest.send (async)
(anonymous) @ AJAX_JSON.html:38

1 Answer

0 votes
answered Nov 10, 2023 by Pexioll (140 points)

Two potential issues might be causing the problem in your code:

  1. CORS (Cross-Origin Resource Sharing) Policy: If the JavaScript code is running on a different domain than the API endpoint (https://api.jsonserve.com), the browser might block the request due to the same-origin policy. To solve this, you can either host your HTML file on the same domain or configure the server to include the necessary CORS headers.

  2. Network Issues or Server Error: Make sure that the server (https://api.jsonserve.com) is accessible and returns a valid JSON response. Check the browser's console (you're already using console.log for debugging) for any error messages. If the server is down or the response is not in the expected JSON format, it can cause issues.

Welcome to OnlineGDB Q&A, where you can ask questions related to programming and OnlineGDB IDE and and receive answers from other members of the community.
...