loading an html page into a div on a page

Question

I am trying to load a separate html file into an already existing div on a site and i am getting the following error :

XMLHttpRequest cannot load MyFile Origin null is not allowed by Access-Control-Allow-Origin. filename.html:1

I am using the load function as follows :

$("#wrapper").load('filename.html');

• Satya: you are trying to call a file from different domain I believe Can you check that
• stark: no i am not trying to call the file from a different domain

Answer 1

You can't load content from another domain like that - the Same Origin Policy prevents it for security reasons. You need to do one of these things:

• set up the Access-Control-Allow-Origin header on the target site
• use an iframe
• use a proxy on your server to proxy the content from the other site.

• stark: by the target site do you mean the site which i want to load into the div or the one containing the div ?
• RichieHindle: @stark: The one you're trying to load.
• stark: Also would this be fixed if i run the file on a xampp server locally ?
• RichieHindle: @stark: Yes - if both pages are served from the same domain, you won't see this problem.

Answer 2

Only URLs from the same domain is allowed to be embedded inside a div. Try hosting a local webserver and try loading the file from there.

$("#wrapper").load('./filename.html');