title: CORS Error when trying to access a local json file
body: <p>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:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>The JSON file and the HTML file are all in the same folder.</p>
  
  <p>Here is my html page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt; &lt;/script&gt;
  
  &lt;script&gt;
  
      $(function() {
  
  
     var people = [];
  
     $.getJSON('Assets/myData.json', function(data) {
         $.each(data.person, function(i, f) {
            var tblRow = "&lt;tr&gt;" + "&lt;td&gt;" + f.firstName + "&lt;/td&gt;" +
             "&lt;td&gt;" + f.lastName + "&lt;/td&gt;" + "&lt;td&gt;" + f.job + "&lt;/td&gt;" + "&lt;td&gt;" + f.roll + "&lt;/td&gt;" + "&lt;/tr&gt;"
             $(tblRow).appendTo("#userdata tbody");
       });
  
     });
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="wrapper"&gt;
  &lt;div class="profile"&gt;
     &lt;table id= "userdata" border="2"&gt;
    &lt;thead&gt;
              &lt;th&gt;First Name&lt;/th&gt;
              &lt;th&gt;Last Name&lt;/th&gt;
              &lt;th&gt;Email Address&lt;/th&gt;
              &lt;th&gt;City&lt;/th&gt;
          &lt;/thead&gt;
        &lt;tbody&gt;
  
         &lt;/tbody&gt;
     &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the JSON file, myData.json:</p>
  
  <pre><code>{
      "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
          }
      ]
   }
  </code></pre>
  
  <p>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?</p>