CODEWITHSUNDEEP
jqueryajaxweb-servicescordova-3
user4582995
user4582995

Reputation: 123

No 'Access-Control-Allow-Origin' header is present on the requested resource ajax jquery phonegap

I am trying to run my phonegap app on ripple emulator and calling method from webservice.asmx using ajax method in jquery, but got cors error:

XMLHttpRequest cannot load https:\rippleapi.herokuapp.com\xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//www.my-domain.com/WebService.asmx/selectData. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:\localhost:4400' is therefore not allowed access. The response had HTTP status code 503.

  1. Have given cors on server side (web.config):

<system.webServer> <defaultDocument> <files> <clear /> <add value="index.aspx" /> <add value="WebService.asmx"/> </files> </defaultDocument> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*"/> <add name="Access-Control-Allow-Headers" value="Content-Type"/> </customHeaders> </httpProtocol> </system.webServer> <system.web> <webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols> </webServices> <customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/> </system.web> <system.serviceModel>

  1. My AJAX method :

    $.ajax({
    type:"POST",
    crossDomain : true,
    url: "http://www.my-domain.com/WebService.asmx/selectData",
    data: JSON.stringify(campaignData),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg)
    {
    var response=msg.d;
    var resultLoop=$.parseJSON(response);
    console.log(response)
    },
    error: function(xhr, ajaxOptions, thrownError)
    {
    $.mobile.loading('hide');
    alert("status :"+xhr.status +" thrownError :"+ thrownError +" ajaxOption : "+ ajaxOptions);
    }
    });

Not able to resolved this, don't know where I have done something wrong or missing something where I have to change in code so that it communicate with server and get data.

Upvotes: 4

Views: 9055

Answers (3)

user4582995
user4582995

Reputation: 123

was running phonegap app on ripple emulator, changed cross domain proxy setting to disabled and it worked.

Upvotes: 1

nirav jobanputra
nirav jobanputra

Reputation: 347

You can add this methods(post,delete,etc) are allowed in sever-side code or you can use chrome plug-in Access-Control-Allow-Headers. like in php

header("Access-Control-Allow-Origin: http://localhost:8080");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT");
header("Access-Control-Allow-Credentials: true");

Upvotes: 0

Rahul Maurya
Rahul Maurya

Reputation: 187

You can use jsonp for the cross domain ajax resuest as:

$.ajax({
type:"POST",
url: "http://www.my-domain.com/WebService.asmx/selectData",
data: JSON.stringify(campaignData),
contentType: "application/json;charset=utf-8",
dataType:"jsonp",
success: function(msg)
{
var response=msg.d;
var resultLoop=$.parseJSON(response);
console.log(response)
},
error: function(xhr, ajaxOptions, thrownError)
{
$.mobile.loading('hide');
alert("status :"+xhr.status +" thrownError :"+ thrownError +" ajaxOption : "+ ajaxOptions);
}
});

One more thing you have add one more parameter in web method 'callback' with string type on server side as:

selectData(string callback){
var JSONString = new JavaScriptSerializer().Serialize(""); 
//JSONString is a json format
return callback+"( "+JSONString + " )";
}

For more details you can refer to http://www.niceonecode.com/Q-A/JAVAScript/AJAX/Cross-domain-ajax-request-to-a-json-file-using-JSONP/20154

Upvotes: -1

Related Questions