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.<anonymous>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~