XMLHttpRequest cannot load Origin null is not allowed by Access-Control-Allow-Origin

Question

I have a code.html file containing the following code.

$.ajax({ 
    type: "POST", 
    datatype: "JSONP",
    url: "path",
    success: function(msg){
    var e = document.createElement("div");
    e.id = "ads";
    document.body.appendChild(e);
    $("#ads").html(msg);
    }
});

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

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

What is causing this and what can I do to fix this?

Solution 1

I will make two assumptions:

• You are probably using chrome
• You are opening a file from the filesystem (i.e. double clicking)

Then, this question is a duplicate of XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless)

The browser is preventing cross site scripting. See: https://developer.mozilla.org/en-US/docs/HTTP_access_control

Solution 2

if you your dataType is jsonp(lowercased), the ajax type must be GET not POST

Update:

Use $.getJSON insteadof $.ajax should solve your problem

Comments

[wukong]

what's the address you posted?

[wukong]

use $.getJSON insteadof $.ajax