请求的资源 ajax jquery phonegap 上不存在“Access-Control-Allow-Origin”标头

Posted 2023-02-19

【中文标题】请求的资源 ajax jquery phonegap 上不存在“Access-Control-Allow-Origin”标头

【英文标题】：No 'Access-Control-Allow-Origin' header is present on the requested resource ajax jquery phonegap

【发布时间】：2016-04-05 04:52:18

【问题描述】：

我正在尝试在波纹模拟器上运行我的 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”标头。因此，不允许访问 Origin 'http:\localhost:4400'。响应的 HTTP 状态代码为 503。

在服务器端 (web.config) 给出了 cors：

<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>

我的 AJAX 方法：

$.ajax( 类型：“POST”， 跨域：是的， 网址：“http://www.my-domain.com/WebService.asmx/selectData”， 数据：JSON.stringify(campaignData), 内容类型：“应用程序/json；charset=utf-8”， 数据类型：“json”， 成功：功能（味精） var response=msg.d; var resultLoop=$.parseJSON(响应); 控制台日志（响应） , 错误：函数(xhr, ajaxOptions, throwedError) $.mobile.loading('隐藏'); alert("status :"+xhr.status +" throwError :"+ throwError +" ajaxOption : "+ ajaxOptions); );

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

【问题讨论】：

您是否在网络工具中查看了来自服务器的实际请求/响应，以了解服务器响应中实际包含哪些标头？

【参考方案1】：

在涟漪模拟器上运行 phonegap 应用程序，将跨域代理设置更改为禁用并且它工作。

【讨论】：

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

【参考方案2】：

您可以在服务器端代码中添加此方法（发布、删除等），也可以使用 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");

【参考方案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 方法“回调”中添加一个参数：

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

【讨论】：

嗨，我不想使用 JSONP，因为它在 android 设备上运行良好，我想在 chrome 中的波纹模拟器上运行。