title: jQuery .load() with Relative Path - XMLHttpRequest Cannot Load - Workaround?
body: <p>I have a <strong>locally-stored</strong> project whose directory structure is the following (I minimized non-relevant folders):</p>
  
  <p><a href="https://i.stack.imgur.com/Gd2ge.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gd2ge.png" alt="directory structure"></a></p>
  
  <p>What I want to do is that in an HTML file, like <code>index.html</code>, to add a <code>&lt;header&gt;</code> such that its contents would be loaded from an external HTML file, so all of what I'll have to write in <code>index.html</code> would be <code>&lt;header&gt;</code>, and my solution would load the content automatically.</p>
  
  <p>To do this, I'd like to use JavaScript (preferably jQuery, but I'll accept other solutions if they work and jQuery doesn't, or if they work and executed faster than jQuery).</p>
  
  <p>I don't think that I should use an <code>&lt;iframe&gt;</code> due to the fact that it'd probably increase loading times more than using jQuery/JavaScript (which, like I said, is what works now, <strong>when the website is live</strong>).</p>
  
  <p>Right now, I'm using the jQuery <code>.load()</code> function. I don't know much about jQuery, but I've been told that it should work locally - and it doesn't, for me.
  My browser's console shows me the problem:</p>
  
  <blockquote>
    <p>jquery-3.1.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/GalGr/Desktop/eiomw/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.</p>
  </blockquote>
  
  <p>And I'm trying to overcome it.</p>
  
  <p>This code works on <a href="http://eiomw.surge.sh/" rel="nofollow noreferrer">my live website</a> - it <em>might</em> not be updated to the code of the files that I linked to below, but it doesn't matter - their code matters.</p>
  
  <p>This is the <code>index.html</code> file: 
  <a href="http://pastebin.com/8t4dM0iE" rel="nofollow noreferrer">index.html</a></p>
  
  <p>This is the <code>header.html</code> file:
  <a href="http://pastebin.com/vF2RuBa5" rel="nofollow noreferrer">header.html</a></p>
  
  <p>This is `main_script.js:
  <a href="http://pastebin.com/jwFXEeSq" rel="nofollow noreferrer">main_script</a></p>