Access-Control-Allow-Origin error

Question

I'm using the following script -

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
<script>
function postForm() {

    $.ajax({
            type: 'POST',
            url: 'http://10.0.0.8:9000/demo',
            data: {"name" : "test"},
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
        })
    }

</script>
</head>
<body>
    <form id="ajaxForm" onsubmit="postForm(); return false; "  method="post"> 
        <input id="test" type="text" name="name" value="Hello JSON" /> 
        <input type="submit" value="Submit JSON" /> 
    </form>

</body>
</html>

The computer i'm trying to access is running the play framework. I am receiving the following error:

OPTIONS http://10.0.0.8:9000/demo 404 (Not Found) jquery-1.9.1.min.js:5 XMLHttpRequest cannot load http://10.0.0.8:9000/demo. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

I've been stumped now for two days, can anyone help me out?

Thanks ahead

NOTE: `contentType` is the `Content-type` header ***sent*** to the server in the **request**! It is ***not*** the `Content-type` of the response. It is incorrect here. — gen_Eric, Mar 14 '13 at 14:50
Here's another solution; http://stackoverflow.com/questions/7564832/how-to-bypass-access-control-allow-origin/17098221#17098221 — Rob, Feb 26 '14 at 21:07

score 19 · Accepted Answer · edited May 23 '17 at 12:16

The problem is that you're trying to make a cross-origin call (from http://localhost:8080 to http://localhost:9000). That's not allowed by the Same Origin Policy, so the browser is trying to use Cross-Origin Resource Sharing to ask the server if it's okay to allow the cross-origin call. (That's the OPTIONS HTTP request you're seeing.) Since the server doesn't reply to the OPTIONS request with headers allowing the call, it's denied by the browser for security reasons.

The SOP applies to all true "ajax" calls (e.g., ones via XMLHttpRequest). You can either:

Update the server to implement the response to the OPTIONS request passing back the headers to allow the call (which will make it work on most modern browsers), or
Make the request to the same port (I'm guessing there's a reason you're not doing that), so the request is to the same origin and the SOP doesn't apply, or
Switch over to using JSON-P. But JSON-P is inappropriate for form submissions because it's a GET, and GET operations are meant to be idempotent, which most form submissions aren't. So unless this happens to be an idempotent form submission (for instance, a search), using JSON-P would be a hack at best.

Do you have a link on how to "Update the server to implement the response to the OPTIONS" if you are using apache as local host? — Jose Ospina, Oct 26 '14 at 14:52

Access-Control-Allow-Origin error

1 Answers1

Linked