JSONP无法正常工作的跨域:权限问题

时间:2013-04-09 12:37:11

标签: php jquery ajax

我试图通过从不同的网站加载来在我的网站上显示一些电影海报。我抓住海报的URL并将它们保存到mySQL数据库中。当用户查找海报时,脚本将搜索数据库并通过ajax获取完整的URL并填充IMG标签以显示图片。

我注意到我从中获取链接的两个网站之一返回" 您无权访问... "。但如果我在浏览器地址栏中复制相同的链接,我可以看到图片。经过一些研究我猜这是由于跨域问题。我读到最常见的解决方案是JSONP,所以我设法计算出以下代码。您可能会看到有两个链接:第一个链接有效,第二个链接(filmup.it)返回权限错误。 (问题不在于缺少')。

HTML代码

<input type="text" id="link" value="http://www.cinemadelsilenzio.it/images/film/poster/11469_big.jpg" />
<!-- <input type="text" id="link" value="http://filmup.leonardo.it/posters/loc/500/dieanotherday.jpg" /> -->
<button class="searchbutton" type="button">Vai</button>

<br />

<img id="poster" src=""/>


<script type="text/javascript">
$(document).ready(function() {
    $(".searchbutton").click(function(){    
        var _text = document.getElementById("link").value;
        $.ajax({
            url: 'img.php',
            data: {parameter1: _text},
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'jsonpCallback',
            success: function(){
                alert("success");
            }
        });
    }); 
});

function jsonpCallback(data){
    $("#poster").attr("src", data);
}
</script>

PHP代码

// let's suppose that here there's a mySQL code to retrieve the links
if (isset($_GET['parameter1']) && isset($_GET['callback'])) {
    $picture = $_GET['parameter1'];
    echo $_GET['callback']."(".json_encode($picture).");";
}

1 个答案:

答案 0 :(得分:0)

已解决!最后我自己解决了问题。使用以下内容更改上面的Jquery代码:

$(".searchbutton").click(function(){    
    var _text = document.getElementById("link").value;
    $.get("img.php", {parameter1: _text }, 
        function(data) {
            $('#poster').html('<img src="data:image/jpg;base64,' + data + '" />');
        }
    );
});

并使用以下内容更改上面的所有PHP代码:

<?php
    header('Content-type: image/jpeg');
    echo base64_encode(file_get_contents($_GET["parameter1"]));
?>

请勿在{{1​​}}之后和<?php之前留下任何空格。

---如果您使用mySQL ---

我注意到如果你需要在将数据发送到?>之前从mySQL数据库中检索数据,那么如果在上面的PHP文件中添加mySQL代码,将无法正常工作。例如,以下代码将不输出任何内容:

file_get_contents

我不知道为什么,但header('Content-type: image/jpeg'); $db = mysql_connect('localhost', 'user', 'pass'); $db_selected = mysql_select_db('posters', $db); if (isset($_GET['parameter1'])) { $p = mysql_real_escape_string($_GET['parameter1']); $result = mysql_query("SELECT link FROM posters WHERE title = '".$p."'"); $row = mysql_fetch_array($result); echo base64_encode(file_get_contents($row["Link"])); } 未完成数据库中检索到的数据,尽管file_get_contents具有正确的内容。似乎$row["Link"]只是空的,但事实并非如此。

您需要将输出重定向到其他页面。变化

$row["Link"]

echo base64_encode(file_get_contents($row["Link"]));

image.php文件将是:

header("location: image.php?link=".$row["Link"]);

希望这有助于某人。