CORS Error when trying to access a local json file

javascript html jquery json cors

11,040

So when you call $.getJSON() you are actually executing an GET call as described in the JQuery docs here. https://api.jquery.com/jQuery.getJSON/ Because of that the browser will enforce CORS, even if you are using the file protocol.

To load the file directly and get around that issue, you can use the Files API in HTML5. The below link gives a good walk through of reading the file data into memory, and then it's just a matter of converting the data into the format you are looking for, in this case JSON.

https://www.html5rocks.com/en/tutorials/file/dndfiles/

I would guess that the easiest option would be to use readAsText() then use vanilla JS to parse it to JSON. Hope this helps!

11,040

Cole Perry

Full stack web developer with an interest in mobile development.

Updated on June 04, 2022

Comments

Cole Perry almost 2 years

All I'm trying to do is access the contents of a json file and display them to a web page. But I'm getting this error:

Access to XMLHttpRequest at 'file:///C:/Users/bobal/Documents/htmlTry/myData.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

The JSON file and the HTML file are all in the same folder.

Here is my html page:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

    $(function() {


   var people = [];

   $.getJSON('Assets/myData.json', function(data) {
       $.each(data.person, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
           "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });

   });

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="2">
  <thead>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>City</th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

</body>
</html>

And here is the JSON file, myData.json:

{
    "person": [
        {
            "firstName": "Clark",
            "lastName": "Kent",
            "job": "Reporter",
            "roll": 20
        },
        {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "job": "Playboy",
            "roll": 30
        },
        {
            "firstName": "Peter",
            "lastName": "Parker",
            "job": "Photographer",
            "roll": 40
        }
    ]
 }

I really don't understand the issue, but if I'm going about this all wrong could someone show me a better way to do this?

Aviv Lo almost 4 years

Do you have a back end of some sort?
Cole Perry almost 4 years

No, I was wondering if that might be an issue but I forgot to mention it. But, for what I'm trying to do I can't really have any kind of backend. I'm limited to JS, HTML, and CSS.
Aviv Lo almost 4 years

So pure html,css, and js.There are no frameworks like nodejs / react /angular?
Cole Perry almost 4 years

No, I'm taking a beginner web dev class because I needed extra hours. I know how to access like external API's and handle the returned JSON object in node or dotNet or something but I'm having trouble doing it bare bones like this
Aviv Lo almost 4 years

Don't get me wrong. I was just trying to make sure there is no other frameworks causing th problem.

Cole Perry almost 4 years

Well this did point me in the right direction but to be honest I feel like this might be a little over my head. I'm not exactly sure how to apply what he is doing to my code.