jQuery Ajax POST unsuccessful

Question

I'm unable to successfully post using jquery's ajax functionality.

URL of the running page is http://localhost:9999, URL of the target (web service) is http://localhost:8080. No the ports aren't the same, they are 9999 and 8080 respectively.

Below is the request and jquery ajax code.

Request:

OPTIONS /profile/set_member HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://localhost:9999
Access-Control-Request-Method: POST

jQuery ajax code:

$.ajax({ 
        type: "POST", url: "http://localhost:8080/profile/set_member", 
        contentType: "application/json", data: member, 
        error: function(){ alert('Update failed!'); }, 
        processData: false, 
        success: function(){ alert('Update successful!'); }
});

Answer 1

This is an issue with cross-domain ajax calls. Basically (at least in Firefox), a POST request is converted to an OPTIONS request for security reasons. I ran into the same exact thing last night, posted here.

WCF Ajax Call not working with Jquery $.ajax

I had an $.ajax call I was making on localhost:23485, to a web service on http://localhost hosted in IIS. Because they are different domains, cross-domain kicked in and made things difficult.

Answer 2

Make a proxy on the same domain you are calling the ajax, e.g. in PHP:

<?php /* get.php */
    $url = $_GET["Url"];
    echo file_get_contents($url);
?>

Make your ajax call:

$.ajax({ url: "get.php?Url=realurl.com" });

That's one workaround.