Home>

As the title says, jQuery's load doesn't work and I can't understand the cause or solution even if I look at the error code, so I would appreciate your help.

The files are in the same hierarchy, and it seems that specifying the path is fine.
Also, even if you write it in the head tag, only alert will work normally.

OS: Mac
Browser: Chrome

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>jquery</title>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
        
            Header.html is loaded here
        
        
            Side.html is loaded here
        
        
            Main.html is loaded here
        
        
            Footer.html is loaded here
        
      <script>
            $(function(){
                $("#header").load("header.html");
                $("#side").load("side.html");
                $("#footer").load("footer.html");
            });
      </script>
      <script>//This works fine
            $(function(){
                alert('jquery is ready.')
            });
      </script>
  </body>
</html>

  header.html

The error in the validator looks like this:
index.html:1
Access to XMLHttpRequest at'file:///Users/nr/common/header.html' from origin'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome- extension, https.

header.html:1
Failed to load resource: net::ERR_FAILED

The same applies to side and footer.