PhoneGap ajax not working

Question

I'm working on a phoneGap app using the file:// protocol. I keep getting this error when using ajax. I have header("Access-Control-Allow-Origin:*") on my server page. But no matter what I'm can't get an ajax response. What do I do?

Failed to load file:///C:/test4/www/trackmyrunning.byethost22.com: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

    $("#b").on('click',function(){
            //pull vars 

            var username = $('#username').val();
            var password = $('#password').val();

            $.ajax({
                url: "trackmyrunning.byethost22.com",
                type: 'POST',
                success: function(data)
                {
                    $("#loginMessage").html(data);
                },
                error: function(xhr, status,error)
                {
                    alert(xhr.status + status + error);

                }

            });
            //request for username
           /* $.get("trackmyrunning.byethost22.com/index.", {user:username,pass:password}).done(function(data){
                $("#loginMessage").html(data);
            }); */

        });

I also have as well. I tried modifying it to and no luck. The error message I get in the alert is 0 error, basically access denied do to cross origin.

Answer 1

I face same issue while developing mobile app using phone gap and spring webservice.

Remember you must pass username and password credentials that is missing here

Then set headers

The Access-Control-Allow-Origin header is a response header that has to be set server side. That is, if the respective server doesn't send this header, the browser prevents you from requesting information from this server due to cross server (domain, subdomain and protocol) infringement.

It would allow requests only if the originating page was served by the same server (domain, subdomain and protocol).

       Modify your js file like this ,

        $("#b").on('click',function(){
        //pull vars 

        var username = $('#username').val();
        var password = $('#password').val();

        $.ajax({
            url: "trackmyrunning.byethost22.com",
            type: 'POST',
            data: { username : username , password : password } ,
            headers: {
                'Access-Control-Allow-Origin': '*'
            },
            crossDomain: true,
            success: function(data)
            {
                $("#loginMessage").html(data);
            },
            error: function(xhr, status,error)
            {
                alert(xhr.status + status + error);

            }

        });

        });

If problem still existing you must modify your server side code.

Following way you can set headers in java response (java back end),

try 
{ 
res.setContentType("application/json");
res.addHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "*");
res.setHeader("Access-Control-Allow-Headers", "X-Requested-      With,Host,User-Agent,Accept,Accept-Language,Accept-Encoding,Accept-Charset,Keep-Alive,Connection,Referer,Origin");
res.setHeader("Access-Control-Max-Age", "8080");
res.setCharacterEncoding("utf-8");
res.getWriter().write(response);
 } 
 catch (IOException e) 
 {

  }

Following way you can set header in php ( backend php),

   header('Access-Control-Allow-Origin: *'); 
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token    , Authorization');

Answer 2

What you are missing is the scheme for the url, and in a Phonegap app when no scheme is provided for a url, the default one ( file:/ /) is used.

Change your url to include http:// or https:// (based on your configuration)

Example:

url: "http://trackmyrunning.byethost22.com"