1

我正在使用 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.

我jQuery code在footer.php中添加了波纹管

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

这个问题要了我的命:(

有什么想法或建议吗？谢谢。

4

2 回答 2

9 
<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' - 删除点 (.)，对我有用。

于 2013-11-05T02:51:07.647 回答
0

由于浏览器同源策略，对服务的请求失败。http://localhost当您尝试访问http://www.youtube.com/上的资源时，您的本地服务器正在运行。这些都在不同的领域。所以它不会工作。

处理此问题的一种方法是使用 JSONP 或 CORS 标头（使用Access-Control-Allow-Originand Access-Control-Allow-Methods），这是CORS规范的一部分。

使用访问控制允许来源

Access-Control-Allow-Origin在您的响应中设置标题。

Access-Control-Allow-Origin: *

以上将允许任何资源跨域使用服务。请参阅如何配置Access-Control-Allow。MDN 上的文章。

于 2013-10-19T06:53:38.683 回答