我正在开发一个页面,通过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...
});
});
我有一个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.
情况:
我正在开发一个从API接收数据的Ionic应用程序.
之前,API在http://地址上,一切正常.
然后我们将API移动到https://并且它不再起作用了.或者,它仍然可以在浏览器中访问它,但不能在手机(或模拟器)中访问它.
我不确定可能是什么问题.在控制台日志中,我看到请求的状态为0.
它可能与白名单,标题或CORS有关.我尝试了几种方法但没有效果.
白名单:
在config.xml之前有这个白名单:
<allow-navigation href="http://*/*" />
我曾尝试以多种方式修改它,但这并没有解决问题.例如,我尝试过:
<allow-navigation href="https://*/*" />
和
<allow-navigation href="*" />
API请求:
这是API请求的一个示例:
$http.get( 'https://MY_DOMAIN.com/mobile/list_mobile_project/' ,{},{"headers" : {"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8" }})
.success(function(data, status, headers, config)
{
// code
}).
error(function(data, status, headers, config)
{
console.log('Error with the API list_mobile_project');
console.log(data);
console.log(status);
console.log(headers);
console.log(config);
});
API响应:
这是API响应的一个例子:
public function list_mobile_project()
{
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
// code
echo json_encode( $project_list );
}
问题:
如何让API在HTTPS上运行？
如果是与CORS相关的问题,如何在服务器端启用它？
我们有一个使用PhoneGap/Cordova 4.3.0构建的iOS应用程序.此应用程序通过<content src="http://example.com/foo" />在config.xml文件中使用直接加载外部网站.所有功能都包含在本网站中,因此我们实际上并没有使用任何本地HTML或JS文件.
作为应用功能的一部分,我们必须播放一些视频.由于该应用程序也设计为脱机工作,因此我们希望在本地缓存这些视频.因此,我们使用FileTransfer插件将其下载到设备,以及其他资源,如图像或PDF.下载文件后,我们将获得带有file://协议的URL .我们也可以选择使用该cdvfile://协议.当我们使用cdvfile://URL显示图像时,图像会正确显示.但是,视频根本不播放.
要播放视频,我们使用标准HTML5视频标记:
<video width="auto" height="100%" controls="controls" autoplay="true">
<source src="..." type="video/mp4" />
</video>
视频本身正在工作,它们将从外部源正确播放(如果我们从服务器而不是本地文件系统访问它们,它们将播放).我意识到问题与Web相关的概念有关,例如同源策略和访问本地文件系统的限制.然而,与此同时,我必须想知道为什么图像在这些相同的约束下工作正常.
到目前为止我尝试了什么:
file://和cdvfile://URL作为src视频.这不会产生任何视觉效果.屏幕简直是黑色.iframe带有src设置的视频URL.使用时file://,屏幕仍为黑色.但是,在使用时cdvfile://,会出现iOS视频播放器界面,带有播放按钮和全屏按钮,但视频无法播放,也没有时间线.video.html,该文件将URL作为参数并video使用该URL 呈现标记src.计划是将此文件包含在内iframe,但显然我无法创建iframe本地文件.我尝试过各种可能指向该特定video.html文件的URL (虽然实际上我不确定这是否可行).在我试过的人分别为:cordova.file.applicationDirectory + 'www/video.html',http://localhost/www/video.html,cdvfile://localhost/www/video.html.现在,我可能会以错误的方式解决这个问题.正如我所看到的,cordova的"标准用例"是您在本地存储HTML/JS/CSS文件.像我正在使用的外部内容可能有点不寻常.我将解释这个使我使用此功能的应用程序的要求.
cache.manifest允许我们控制Web应用程序代码的更新,同时允许它在本地缓存.这可能是最重要的考虑因素,因为如果我们想在Cordova中本地保留一些文件,我们将不得不在Javascript中重新实现这个缓存功能(尽可能使用尽可能薄的层).无论如何,我主要关注的是如何让这些视频正常运行.我愿意尝试最骇客的解决方法!如果当前的开发决策真的不可能,那么也许你可以给我一些关于如何构建应用程序以使其工作并仍然满足我的要求的提示.
非常感谢你!
我是新手IONIC-2,想要连接我的移动应用程序Odoo - open source ecommerce..这个连接涉及一些JSONP请求..我已经完成了同样的jQuery事先...它在phonegap应用程序中正常工作..但虽然我做同样的事情IONIC-2它给了我CORS和JSONP错误..
谁可以帮助我...
我之前的jQuery代码是......
/****** index.js ******/
function json(url, params) {
var deferred = jQuery.Deferred();
uniq_id_counter += 1;
var payload = {
'jsonrpc': '2.0',
'method': 'call',
'params': params,
'id': ("r" + uniq_id_counter)
};
rpc_jsonp(url, payload).then(function (data, textStatus, jqXHR) {
if (data.error) {
deferred.reject(data.error);
}
deferred.resolve(data.result, textStatus, jqXHR);
});
return deferred;
}
function rpc_jsonp(url, payload) {
// extracted from payload …