我正在开发一个页面,通过jQuery的AJAX支持从Flickr和Panoramio中提取图像.
Flickr端工作正常,但当我尝试$.get(url, callback)从Panoramio时,我在Chrome的控制台中看到一个错误:
XMLHttpRequest无法加载http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150.Access-Control-Allow-Origin不允许使用null.
如果我直接从浏览器查询该URL,它可以正常工作.发生了什么,我可以解决这个问题吗？我是不是错误地编写了我的查询,或者这是因为Panoramio会妨碍我正在尝试做的事情？
Google没有在错误消息上显示任何有用的匹配项.
编辑
以下是一些显示问题的示例代码:
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';
$.get(url, function (jsonp) {
var processImages = function (data) {
alert('ok');
};
eval(jsonp);
});
});
您可以在线运行该示例.
编辑2
感谢Darin对此的帮助. 上面的代码错了. 请改用:
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';
$.get(url, function (data) {
// can use 'data' in here...
});
});
是否可以将数据发布到JsonP？或者所有数据都必须作为GET请求在查询字符串中传递？
我有很多需要发送到服务的数据,跨域,并且它太大而无法通过查询字符串发送
有什么方法可以解决这个问题？
跟我说,这个需要一些解释.
我正在帮助构建混合移动Web应用程序.主要代码库是HTML5和JavaScript,它将包装在本机移动Web视图(一个电话空间)中.
部分功能要求应用程序将信息发布到由我们的客户控制的Web服务.由于其他人正在使用此Web服务,因此几乎没有空间可以更改此Web服务.我们使用HTTP POST发送JSON并从服务器接收响应.此响应的一部分是一个JSESSIONID cookie,用于管理与服务器的会话.在初始initSession()调用之后,我们需要使用每个(AJAX)请求发送JSESSIONID cookie.
当部署在移动设备上时,Web应用程序将包装在本机Web视图中,该视图通过浏览启动Web应用程序file:///path/to/app/index.html.
我们尝试的第一件事是要求我们的客户Access-Control-Allow-Origin: *在其响应头中设置允许CORS.然后我们尝试发布到服务器:
$.ajax({
url: 'http://thirdparty.com/ws',
data: data,
type: "POST",
dataType: "JSON",
success: successCallback,
error: failedCallback
});
监控请求,显然没有包含cookie.仔细观察后,CORS规范中有一个特殊部分用于处理用户凭证,其中包括会话cookie.所以我修改了AJAX调用以包含这个:
$.ajax({
url: 'http://thirdparty.com/ws',
data: data,
type: "POST",
dataType: "JSON",
success: successCallback,
error: failedCallback,
xhrFields { withCredentials: true }
});
另一个错误,这次来自浏览器.更多阅读产生了以下内容:
如果第三方服务器没有响应
Access-Control-Allow-Credentials: true标头,则响应将被忽略,并且不可用于Web内容.重要说明:在响应凭证请求时,服务器必须在
Access-Control-Allow-Origin标头中指定域,并且不能使用通配符.
因此,我们需要更改服务器的标头以包含Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin我们的Origin.
在这里,我们终于遇到了一个问题:使用file:// protocol加载网页时Origin,Web View发送的请求标头设置为null.因此无法由服务器解析,因此服务器无法将其设置为Access-Control-Allow-Origin.但是,如果服务器不能设置Access-Control-Allow-Origin到其他的东西比* …
我有一个AngularJS/Cordova应用程序,用于在远程服务器上轮询JSON服务:
$http({method: 'GET', url: 'http://example.com/index.php'})
在浏览器中开发并运行我的Intranet apache服务器(http://dev)我得到"没有'Access-Control-Allow-Origin'标头存在"所以我通过添加以下内容来解决这个问题:
Header set Access-Control-Allow-Origin "http://dev"
一切正常,我Origin:http://dev在Chrome开发工具中看到了.
因此,不得不首次考虑这个问题,我想知道当应用程序在Android/iOS网页浏览器中运行时,Origin会是什么.我决定在我的设备上进行构建和部署,并期望在远程调试中看到相同的错误(适用于iOS的Safari和适用于Android的Weinre),但令我惊讶的是它可以工作(不发送任何CORS标头)!我还发现,在两个设备中,应用程序在webview下以file://方案运行,而不是(我假设的)手机操作系统提供的某些类型的http服务器.
因此研究似乎表明文件不需要CORS:// - 这样的"网站"可以访问任何域上的任何XHR资源.但是,当我在桌面浏览器上测试时,我发现虽然Safari不需要CORS文件://但确实如此,FireFox可以在没有CORS的情况下工作
所以我的问题:
1)为什么我的应用程序在Android/iOS中没有CORS工作 - 是因为CORS不适用于file://,或者,Cordova是否正在做某些事情以使其在设备中运行？
我有<access origin="*"/>我的配置
2)如果,Q1的待定答案,我应该想要在安全的网站上并明确允许来自应用程序的请求,你为file://"hosts"提供了什么价值的Access-Control-Allow-Origin？在我的调试中,来自file的请求中没有Origin头://
3)除了阻止XHR请求到远程服务器,Chrome还阻止我的应用程序模板(我使用单独的文件),见下文.这是我的应用程序的潜在问题,还是我不需要担心的Chrome问题？
XMLHttpRequest cannot load file:///Volumes/projects/phonegap/www/templates/tabs.html. Cross origin requests are only supported for HTTP.
我有一个非常简单的Spring Rest后端,它返回JSON数据.宁静的URL在我的浏览器中工作如下:
http://localhost:8080/abc/runlist
它返回如下数据:
[{"stock_num":"KOH19","damage":"Toronto (Oshawa)"},{"stock_num":"AZ235","damage":"Toronto (Oshawa)"},...
我有一个独立的html页面,不属于我的网络应用程序.我只想测试我的角度代码是否获取数据然后循环遍历它.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/abc/runlist")
.success(function (response) {$scope.names = response.records;});
});
</script>
yo yo
</body>
`
为什么不起作用？我在Spring遇到了一些需要实现CORS的东西.我这样做了但仍然没有回复:
@Component
public class SimpleCORSFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain
chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, …我正在使用zapworks studio来开发AR体验.它使用Z.ajax进行ajax调用.我发出GET请求和POST请求.我也使用smileupps来托管couchdb(他们有免费托管).这是CORS配置:
凭证:false; 标题:接受,授权,内容类型,来源; 方法:GET,POST,PUT,DELETE,OPTIONS,HEAD; 起源:*
在Windows上启动ZapWorks Studio时,一切正常.但是,当用Android设备扫描zapcode时,post ajax调用失败.只有帖子.我正在使用基本身份验证.我强制说只有管理员可以在couchdb上管理数据库.我可以通过Web浏览器从桌面和手机访问主机,手动完成所有操作.
我尽我所能来解决问题:删除身份验证,更改CORS配置......没有任何作用.我认为这是一个CORS的问题,但一切正常,在Windows和移动设备上只是POST失败...我一直得到状态代码为0.
编辑 - 新信息,apitester测试也适用于桌面和移动.
编辑 - 在我的手机上尝试使用REST Api Client,它也运行良好.这只能是一个CORS问题或zapworks的问题.很奇怪,它适用于Windows,但不适用于手机.
编辑 - 我发现了问题所在,但没有找到解决方法.所以我设置了一个代理来调试zapworks studio在本教程之后发出的请求.它似乎做了预检请求,但得到了回应
"HTTP/1.1 405方法不允许"
即使有效载荷是
{"error":"method_not_allowed","reason":"仅允许DELETE,GET,HEAD,POST"}.
这是请求:
OPTIONS /ranking HTTP/1.1
Host: somehost.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: null
User-Agent: Mozilla/5.0 (Linux; Android 8.0.0; SM-G950U1 Build/R16NW; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/67.0.3396.87 Mobile Safari/537.36
Access-Control-Request-Headers: authorization,content-type,x-requested-with
Accept: */*
Accept-Encoding: …