我在 Rails 4 网站上遇到 Filepicker.io 问题。具体来说,当我尝试通过 Filepicker.io 小部件上传文件时,我偶尔会收到以下 JavaScript 错误消息(大约 50% 的时间)。
Blocked a frame with origin "https://www.filepicker.io" from accessing a frame with origin "https://salesbeach.com". Protocols, domains, and ports must match.
这发生在 Chrome 和 Firefox 中。我的假设是 Filepicker.io 应该但不是返回Access-Control-Allow-Origin: *
标头。但是,我在其他网站上使用过 Filepicker.io 没有这个问题,我想知道 Turbolinks 是否可能是罪魁祸首。
诊断信息
我的 JavaScript 调用是:
filepicker.pickAndStore({mimetypes: mimeTypes},{},function(fpfiles) { ... }
我通过以下方式加载 Filepicker 库(在 HTML 中<head>
):
(function() {
$(document).ready(function() {
$.getScript('//api.filepicker.io/v1/filepicker.js', function() {
filepicker.setKey('#{MY_API_KEY}');
});
})
})();
具有以下<iframe>
HTTP 请求/响应(来自 Chrome 调试工具):
要求
Request URL:https://www.filepicker.io/dialog/comm_iframe/
Request Method:GET
Status Code:200 OK
Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
DNT:1
Host:www.filepicker.io
Pragma:no-cache
Referer:https://salesbeach.com/playground
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1566.2 Safari/537.36
回复
Response Headers
Connection:keep-alive
Content-Encoding:gzip
Content-Length:857
Content-Type:text/html; charset=utf-8
Date:Fri, 19 Jul 2013 19:23:22 GMT
P3P:CP='IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT'
P3P:CP="OTI DSP COR ADM DEV TAIo PSA PSD IVAi IVDi CONi HIS OUR IND CNT COM INT NAV"
Server:nginx
Vary:Accept-Encoding
此外,我还包含了一个重现该错误的游乐场:游乐场环境