iFrame在Facebook Canvas App中显示空白



我有一个非常简单的页面,我试图在Facebook iframe中查看。这是一个 Django 视图,但它不依赖于请求是通过 POST 还是 GET 提交的。它所做的只是返回一些简单的 HTML。

如果我们直接点击链接,它会正确显示。如果在 Firefox 中,我右键单击 iframe 并选择仅显示该帧的选项 - 那么它就会正确显示。但是,在查看Facebook应用程序时,没有任何显示。

这是应用程序链接:http://apps.facebook.com/fireflietest/这指向 http://www.fireflie.com/facebook/

这是我非常简单的视图的代码:

from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt, csrf_protect
@csrf_exempt
def facebook(request):
    body = """
    <html>
        <head><title>Fireflie on Facebook</title></head>
        <body>Hello, Facebook!</body>
    </html>
    """
    return HttpResponse(body)

只是出于测试目的,我创建了一个小的HTML表单,可以POST到该页面。它工作正常。我还运行了Facebook调试工具,"抓取器"显示它正在正确提取我们的内容。

以下是服务器日志,显示它两次都返回 200 OK:

24.210.144.32 - - [15/Jun/2012:18:27:18 +0000] "POST /facebook/ HTTP/1.1" 200 31 "http://apps.facebook.com/fireflietest/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Ubuntu/12.04 Chromium/18.0.1025.151 Chrome/18.0.1025.151 Safari/535.19"
24.210.144.32 - - [15/Jun/2012:18:27:26 +0000] "GET /facebook/ HTTP/1.1" 200 67 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Ubuntu/12.04 Chromium/18.0.1025.151 Chrome/18.0.1025.151 Safari/535.19"

最后,我尝试使用 Chrome 的开发人员工具深入研究响应对象,但看起来在查看 iframe 版本时返回的只是内容标头。

有人知道这里发生了什么吗?或者关于如何进一步调试此问题的任何想法?谢谢。

编辑:我将Facebook应用程序的URL复制并粘贴到同一位置。我将在这里再次复制它,以防万一我做错了什么。我不确定它为什么要扔 404。

直接从地址栏复制并粘贴:http://apps.facebook.com/fireflietest/

更新:原来我不得不打开沙盒模式。不应该再有404了。当然,我仍然遇到原始问题,即我的iFrame显示为空。谢谢!

更新2:(从我的Django用户组thead复制和粘贴)

我一直在尝试诊断这个问题。不过,我不知道发生了什么。

  1. 我尝试在Nginx上提供一个简单的.html页面,看看这是否是问题所在。它没有正确服务(通过错误),但它确实显示了错误。问题是,你不能在NGINX中发布到静态页面。没什么大不了的,无论如何我都不会尝试加载静态页面。

  2. 我查看了我的日志文件。事实证明,我的应用程序超时了。这没有任何意义,因为它不会在其他任何地方超时。

  3. 这里有一些日志显示了一些奇怪的事情。我不确定如何调试问题。从我正在阅读的内容来看 - 这是我所描绘的。

Nginx正确接收请求。Nginx将请求推送到uWSGI应用程序(django)。Django 成功获取请求。Django 试图做出回应,但这必须是它中断的地方。

我不确定问题是什么 - 但它与在facebook iframe内有关。(我还没有检查远程 iframe,接下来我会这样做)

uWSGI Logs:
[pid: 11059|app: 0|req: 3/4] 24.210.144.32 () {52 vars in 1170 bytes} [Tue Jun 19            14:24:03 2012] POST /facebook/ => generated 0 bytes in 444 msecs (HTTP/1.1 500) 0 headers in 0 bytes (0 switches on core 0)
[pid: 11345|app: 0|req: 1/1] 24.210.144.32 () {52 vars in 1170 bytes} [Tue Jun 19 14:24:31 2012] POST /facebook/ => generated 2970 bytes in 333 msecs (HTTP/1.1 200) 4 headers in 128 bytes (1 switches on core 0)
[pid: 11353|app: 0|req: 3/31] 24.210.144.32 () {52 vars in 1172 bytes} [Tue Jun 19 14:31:04 2012] POST /facebook/ => generated 2970 bytes in 3 msecs (HTTP/1.1 200) 4 headers in 128 bytes (1 switches on core 0)
[pid: 11954|app: 0|req: 1/14] 24.210.144.32 () {52 vars in 1216 bytes} [Tue Jun 19 14:35:04 2012] POST /facebook/ => generated 2970 bytes in 343 msecs (HTTP/1.1 200) 4 headers in 128 bytes (1 switches on core 0)
[pid: 11950|app: 0|req: 2/31] 24.210.144.32 () {52 vars in 1211 bytes} [Tue Jun 19 14:48:57 2012] POST /facebook/ => generated 2970 bytes in 3 msecs (HTTP/1.1 200) 4 headers in 128 bytes (1 switches on core 0)
[pid: 11962|app: 0|req: 4/57] 24.210.144.32 () {52 vars in 1216 bytes} [Tue Jun 19 14:53:43 2012] POST /facebook/ => generated 2970 bytes in 2 msecs (HTTP/1.1 200) 4 headers in 128 bytes (1 switches on core 0)
Nginx Error Logs:
2012/06/19 20:02:30 [error] 11164#0: *29617 readv() failed (104: Connection reset by peer) while reading upstream, client: 24.210.144.32, server: fireflie.com, request: "POST /facebook/ HTTP/1.1", upstream: "uwsgi://<commented out for security>", host:     "www.fireflie.com", referrer: "http://apps.facebook.com/253156011452899/"
Nginx Access Log:
24.210.144.32 - - [19/Jun/2012:20:02:30 +0000] "POST /facebook/ HTTP/1.1" 200 31 "http://apps.facebook.com/253156011452899/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Ubuntu/12.04 Chromium/18.0.1025.151 Chrome/18.0.1025.151 Safari/535.19"
24.210.144.32 - - [19/Jun/2012:20:03:29 +0000] "-" 408 0 "-" "-"
24.210.144.32 - - [19/Jun/2012:20:03:29 +0000] "-" 408 0 "-" "-"

解决方案

问题出在uWSGI上。我不确定为什么它不起作用 - 但我相信这可能与Facebook的Canvas应用程序发布数据太少有关。无论如何,这是对我有用的修复程序。

我修改了我的uWSGI配置选项。我添加了以下三个选项,即使第一个选项可能是无操作的,最后一个可能只是为了良好的安全性(它在我的暂存站点上工作没有它)。

<pep3333-input/>
<post-buffering>4096</post-buffering>
<buffer-size>32768</buffer-size>

IE上曾经有一个问题,没有安装闪存。我不知道他们是否修复了它。

CSRF也是一个候选者。尝试删除 csrf 修饰器并停用 csrf 视图中间件。

您也可以在本地计算机上试用。在 Facebook 应用设置中将网站网址设置为 localhost.local:8000,或使用这些设置创建新应用),并将 localhost.local 添加到您的主机文件中。这允许您拥有 DEBUG=True 和日志记录。

我今天遇到了我认为是同样的问题,使用 Flask。GET工作正常,开机自检失败,但Flask没有报告任何错误,Firebug/Chrome Dev Tools除了"连接已重置"之外没有报告任何内容。

然后我找到了Flask创建者Armin Ronacher的这个片段:

http://flask.pocoo.org/snippets/47/

它解释了问题并包含一个对我有用的修复程序。鉴于您摆弄了缓冲区参数,我怀疑这可能是同一个问题。

希望它至少可以帮助您找出问题的原因。

看起来这是一个已知问题。此解决方法将是一个良好的开端。

最新更新