请求的资源中没有出现“Access-Control-Allow-Origin”头部，这与ajax、jQuery和PhoneGap有关。

Question

我正在尝试在Ripple模拟器上运行我的PhoneGap应用程序，并使用jQuery中的ajax方法从webservice.asmx调用方法，但遇到了CORS错误：

XMLHttpRequest无法加载https:\rippleapi.herokuapp.com\xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//www.my-domain.com/WebService.asmx/selectData。所请求的资源上没有'Access-Control-Allow-Origin'标头。因此，源'http:\localhost:4400'不被允许访问。响应具有HTTP状态代码503。

已在服务器端(web.config)上启用了CORS：

2. 我的AJAX方法：

   $.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);
   }
   });

无法解决此问题，不知道我做错了什么或者遗漏了什么，在代码中需要更改什么以便与服务器通信并获取数据。

- user4582995

---

你是否查看过网络工具中服务器的实际请求/响应，以查看服务器响应上实际存在哪些标题？ - jfriend00

Answer 1

在Ripple模拟器上运行PhoneGap应用程序，将跨域代理设置更改为禁用，然后它就可以工作了。

- user4582995

---

如果您能够回答自己的问题，请将自己的答案标记为被接受的答案。 - twernt

Answer 2

你可以在服务器端代码中添加这些方法（post、delete等），或者你可以使用Chrome插件Access-Control-Allow-Headers，就像在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");

- nirav jobanputra

Answer 3

您可以使用jsonp进行跨域ajax请求，如下所示：

$.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);
}
});

还有一件事，您需要在服务器端的Web方法中添加一个名为“callback”的字符串类型参数：

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

更多细节请参考http://www.niceonecode.com/Q-A/JAVAScript/AJAX/Cross-domain-ajax-request-to-a-json-file-using-JSONP/20154

- Rahul Maurya

---

嗨，我不想使用JSONP，因为它在Android设备上运行良好，我想在Chrome的Ripple模拟器上运行。 - user4582995