How can I load a remote file using jQuery?

Question

I'm currently using this code:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="div"></div>
<script>
var timer = 10;
var source = 'file.php';

$(document).ready(function() {
  refresh();
  setInterval(function() { refresh() }, timer * 1000);
});

function refresh() {
    $('.div').load(source);
}
</script>

But, if I put a link to the file.php file, say http://example.com/file.php, it doesn't load anything.

What I would like to do is to be able to load remote files.

How can I go about doing this? Or is this disabled for security reasons?

My console shoots the following error:

XMLHttpRequest cannot load SOURCE. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'URL' is therefore not allowed access.

SOURCE is the place I was trying to load from, and URL is the place I was trying to load the source.

You need to run the code on a web server, not from your local hard drive. What JavaScript errors do you see in your browser console? — Blazemonger, Dec 09 '14 at 20:32
I was running it on a web server. I didn't check for any errors. — Cody, Dec 09 '14 at 20:36
Checking for errors is the first thing you should have done; post them here verbatim if you don't understand them. — Blazemonger, Dec 09 '14 at 20:39
Sorry, I'm not a Javascript developer. I'll learn. I'll check for errors now, thank you. — Cody, Dec 09 '14 at 20:40

score 1 · Answer 1 · answered Dec 09 '14 at 20:36

1

I think the jquery load() function can only load content from the same domain.

You might be able to fetch the results with a crossdomain ajax call (documentation on http://api.jquery.com/jquery.ajax/), depending on what you are trying to fetch.

answered Dec 09 '14 at 20:36

Eric OSW

89
3

All the script really does is print a string of text and some HTML. Should I be able to do it? – Cody Dec 09 '14 at 20:36
Error added to the main question. – Cody Dec 09 '14 at 20:52

Meta_data · Answer 2 · 2014-12-09T20:40:56.453

0

from what i understand you are trying to get the 'file.php' Code text .. this is not possible Server side scripts only output their Screen . e.g echos / print / Var dump.

if you are trying to activate a php script at a remote server you can use post / get using JQuery and get the script reply.

edited Dec 09 '14 at 20:40

answered Dec 09 '14 at 20:34

Meta_data

390
1
12

Error added to the main question. – Cody Dec 09 '14 at 20:52

Cody · Accepted Answer · 2014-12-11T21:54:52.337

0

Alright.

My issue was that I didn't have CORS enabled.

I fixed this by adding the following code to the top of my request file (file.php)

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET');
header("Access-Control-Allow-Headers: X-Requested-With");

Now it works.

Allowing the origin to be anyone is insecure and I don't recommend but for what I'm doing, it's fine.

edited Dec 11 '14 at 21:54

answered Dec 09 '14 at 21:13

Cody

219
1
11

Keep in mind that [`'Access-Control-Allow-Origin: *'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin) will allow ANY other site to load this file via AJAX as well, whether you want them to or not. You're better off replacing `*` with the narrowest domain possible. – Blazemonger Dec 09 '14 at 21:22
Can I allow multiple domains with commas? Like `header('Access-Control-Allow-Origin: tumblr.com, facebook.com');`? – Cody Dec 10 '14 at 20:29
1

http://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains – Blazemonger Dec 11 '14 at 13:47

How can I load a remote file using jQuery?

3 Answers3