1

I would like to load local file data & populate that data while page loads.

I tried to use this jquery function

<script type="text/javascript">
   jQuery(document).ready(function ($) {
       $("div.footerText").load("footerText.txt");
   });
</script>

But this results in following error

Access to XMLHttpRequest at 'file:////footerText.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.

Basically I am trying to write a simple HTML page which loads data into different div by reading files that are in the same code base. here is rough structure of html

<head>...</head>
<body>
  <div id="headerText">
  <div id="mainText">
  <div id="footerText">
  <script type="text/javascript">

    jQuery(document).ready(function ($) {
        $("div#headerText").load("headerText.txt");
        $("div#mainText").load("mainText.txt");
        $("div#footerText").load("footerText.txt");
    });
  </script>
</body>
katch
  • 820
  • 1
  • 7
  • 24
  • This is generally a [bad idea](https://stackoverflow.com/questions/3595515/origin-null-is-not-allowed-by-access-control-allow-origin-error-for-request-ma) in the security sense, hence your CORS error. Moreover, are you hoping to read this server-side or client-side? Because it'll fail unless clients have the requisite files long before any CORS issues arise. See more [here](https://stackoverflow.com/questions/43493323/cross-origin-request-for-local-file). – t56k Sep 26 '21 at 20:08
  • Will work fine if you run a localhost server and open the main page on `http://localhost` – charlietfl Sep 26 '21 at 20:42

1 Answers1

0

I think you should not do that.. and that seems kinda impossible. Have a look at this QA for more details

Mrkouhadi
  • 446
  • 5
  • 14