XMLHttpRequest cannot load file://... Origin null is not allowed by Access-Control-Allow-Origin

Question

I see that the above question was asked earlier, however even after referring them I wasn't able to figure out a way for me, hence I took the liberty to start a new post for this question.

I have a getjson.html file containing the following code

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("json_data.txt",function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});
</script>
</head>
<body>

<button>Get JSON data</button>
<div></div>

</body>
</html>

The json_data.txt contains the following,

{ 
  "firstName": "John",
  "lastName": "Doe",
  "age": 25
}

When I open the getjson.html file in the browser, it gives an error:

"XMLHttpRequest cannot load file://..... Origin null is not allowed by Access-Control-Allow-Origin."

Someone Please suggest a simple solution regarding this about how could I make this thing possible.

P.S: I am writing a web app on go.

Yes I am running everything on a web server. Then is this thing possible if I just do serveFile("somefile.hmtl") — chinmay, Jun 26 '11 at 04:45
So if I serve the above file using a web server it wouldn't give any errors ? — chinmay, Jun 26 '11 at 05:27

score 7 · Accepted Answer · edited Apr 02 '14 at 02:26

7

Are you directly opening an HTML file? The file needs to be placed on a web server then executed. Normally browsers don't allow file:/// protocol for AJAX calls for security reasons.

edited Apr 02 '14 at 02:26

rootmeanclaire

808
3
13
37

answered Jun 25 '11 at 18:34

Troy SK

1,279
7
14

score 0 · Answer 2 · edited Apr 17 '13 at 19:48

I am reading your problem a bit late (spring 2013) and think I have found a solution to the limitation of CORS XHR cross domain in a file:// context !

I have put this header on my remote php script:

header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);

and it seems to work ! More explanation here: Rannpháirtí anaithnid/CORS

It may work on a "phone gap" application instead of using jquery and jsonp?

XMLHttpRequest cannot load file://... Origin null is not allowed by Access-Control-Allow-Origin

2 Answers2

Linked

Related