Cross origin error in jquery.load()

Question

I want to load html snippets into my html page with the following code:

       <div data-include="header"></div>

        <script>
          $(function(){
            var includes = $('[data-include]');
            jQuery.each(includes, function(){
              var file = '_HTML/' + $(this).data('include') + '.html';
              $(this).load(file);
            });
          });
        </script>

In Firefox and Safari it works perfect, but in Chrome and IE Edge it gives me a cross origin request error:

XMLHttpRequest cannot load file:///../header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Are there any workarounds for this error which are working in every of the named browsers?

have you tried adding `http://` or `https://` (whichever suits your need) at the beginning of the URI ? This has already solved a similar issue in my case. — Jeff Noel, May 31 '17 at 17:56
So what you are saying is two browsers properly protected you from malicious code and the other two didn't. and now you want to stop the first two from protecting you. — Kevin B, May 31 '17 at 17:58

score -1 · Accepted Answer · answered May 31 '17 at 18:00

-1

You need an http server to request local files.

You can start one easily using python:

python -m http.server 8000

answered May 31 '17 at 18:00

Murilo Parente

16
1

@empiric i mean... python, iis, node.js, apache, nginx, etc, take your pick – Kevin B May 31 '17 at 18:02
@empiric and, yes, you do in fact need a server if you're going to test ajax requests without reducing the security of your web browser. – Kevin B May 31 '17 at 18:03
1) As @KevinB said, you can use whatever you want to start an http server, just exemplified what I find simpler. 2) You're right, you do not need a server to open an html file, but you need a server to accept the http request from the html file. Chrome and Edge do not support the "file" type of request, I believe this is for security reasons. – Murilo Parente May 31 '17 at 18:15
Maybe you should edit your answer Murilo to make clear there are multiple solutions (different servers) and they are needed because of the security restrictions by some browsers. – theiNaD May 31 '17 at 18:18

Cross origin error in jquery.load()

1 Answers1