本地服务器中的Android跨域错误

Question

I am using phoneGap-2.9.0

I can't access my api.php page in local server. i am getting error! alert.

Please check my code:

Javascript

$(document).ready(function () {
    $('#registerForm').submit(function(){ 
        var postData = $(this).serialize();
        var formUrl = $(this).attr('action');
        $.ajax({
            type: 'POST',
            url: formUrl,
            dataType : 'json',
            data: postData,         
            success: function(data){
                alert(data);
            },
            error: function(){
                alert('error!');
            }
        }); 


        return false; 
    }); 
}); 

HTML

<form name="registerForm" id="registerForm" method="post" action="http://localhost/android/REST_API/api.php">
        <label>First Name :</label>
        <input type="text" name="first_name" id="first_name" placeholder="First Name" />
        <label>Last Name :</label>
        <input type="text" name="last_name" id="last_name" placeholder="Last Name" />
</form>

api.php

<?php header('Access-Control-Allow-Origin: *'); echo "true"; ?>

Above code i am running in browser it working fine. But it is not working in device emulator. In emulator if i am using http://www.raddyx.in/api.php instead of http://localhost/android/REST_API/api.php i am gettng true .

Please me and let me know the problem.

Screenshot:

Answer 1

I'm not 100% sure why this is happening but my money is on the fact that its an emulator, if you deploy it to a physical device it should work the same as in a desktop browser, If you try JSONP instead of JSON then your issue should be resolved on the emulator as this sidesteps any cross domain security breach the emulator may think is happening.

$(document).ready(function () {
$('#registerForm').submit(function(){ 
    var postData = $(this).serialize();
    var formUrl = $(this).attr('action');
    $.ajax({
        type: 'POST',
        url: formUrl,
        dataType : 'jsonp',
        data: postData,         
        success: function(data){
            alert(data);
        },
        error: function(){
            alert('error!');
        }
    }); 


    return false; 
}); 
});