Question

我正在使用WordPress并使用jQuery fancyBox来显示YouTube视频，但我收到此错误：

XMLHttpRequest cannot load http://www.youtube.com/embed/L9szn1QQfas?autoplay=1. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

我在footer.php中添加了jQuery code

$(document).ready(function() {
    $(".fancybox").fancybox();
});

并在我的帖子中添加了html代码。

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">
    <img class="alignleft size-thumbnail wp-image-583" alt="small-screen-youtube" src="http://localhost/example/wp-content/uploads/2013/10/small-screen-youtube-150x150.png" width="150" height="150" />
</a>

这个问题让我吃了一惊:(

有任何想法或建议吗？感谢。

Answer 1

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">
<img class="alignleft size-thumbnail wp-image-583" alt="small-screen-youtube" src="http://localhost/example/wp-content/uploads/2013/10/small-screen-youtube-150x150.png" width="150" height="150" />
</a>

要解决此问题，您需要做的是：将'fancybox.iframe'更改为'fancybox iframe' - 删除点（。），为我工作。

Answer 2

由于浏览器same origin policy，对服务的请求失败。当您尝试访问http://www.youtube.com/处的资源时，您的本地服务器位于http://localhost。这些都在不同的领域。所以它不会起作用。

处理此问题的方法是使用CORS规范的JSONP或CORS标头（使用Access-Control-Allow-Origin和Access-Control-Allow-Methods）。

使用Access-Control-Allow-Origin

在回复中设置Access-Control-Allow-Origin标题。

Access-Control-Allow-Origin: *

以上内容将允许任何资源使用服务跨域。请参见如何配置Access-Control-Allow。 Article on MDN

jQuery fancyBox YouTube视频无效

2 个答案:

使用Access-Control-Allow-Origin