chrome 中 出现 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "ip 地址" from accessing a cross-origin frame 问题的解决方法

1 发现问题

最近开发了 Excel 导入、导出工具，极大地提升了工作效率，沾沾自喜中。然而把项目部署在测试环境上，却发现在 chrome 中无法上传文件，日志报了以下错误：

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://xx.xx.xxx.xxx:8081 " from accessing a cross-origin frame.   

at HTMLIFrameElement.http://xx.xx.xxx.xxx:8081/static-v1.0.0/dwz/js/dwz.ajax.js:76:20    
at HTMLIFrameElement.dispatch http://xx.xx.xxx.xxx:8081/static-v1.0.0/dwz/js/jquery-2.1.4.min.js:3:6466 )   
at HTMLIFrameElement.r.handle http://xx.xx.xxx.xxx:8081/static-v1.0.0/dwz/js/jquery-2.1.4.min.js:3:3241 

2 分析

看提示是在获取 iframe 的 contentDocument 时出现的异常，这个异常一般是因为浏览器的同源策略，即同域可读可写，跨域可读但不可写。

但我们是在同一个项目内，调用的都是同一个域内的 action 呀，所以我们在此加一个断点，观察实际上的 iframe ：

发现这个 baseURI 有问题，正常的地址应该是对应模块的 URI，形如：
http://xxx/base/index#/xxx/table，然而这里的地址却是之前的某个模块的 URL 地址（没有使用 Excel 导入、导出工具），也就是说，浏览器并没有认出来这个新页面的 URL 地址。

查看代码，发现在通用的 freemarker 页面中写的是：

action="${contextPath}/${importUrl}"

而传入的 URL 地址却是：

"/xxx/importExcel"

合并后的地址是：

//xxx/importExcel

有没有发现前面多了一个 /，所以导致浏览器的 frame 没有把这个地址认出来！

3 解决

去除这个多余的 /，就可以啦O(∩_∩)O~