之前对于跨域问题仅有粗浅的认识,一般是浏览器层面出于安全性的考虑,不允许调用其他页面的对象。这次在Sencha Touch中解决这个问题额外花掉不少时间。
解决的方法大概就是:
- 修改服务器的header;
- JsonP。JsonP方法是一种非官方的解决方案,只支持Get方法,需要服务器端根据callback参数返回不同的内容。返回的内容不是标准的json格式,对服务器端的改动会比较麻烦。我选择了修改服务器返回的header的方法。
1. 修改header的Access-Control-Allow-Origin
将header的Access-Control-Allow-Origin设为允许的域名列表,我这里直接设置为星号了。项目采用的是SSH的架构。在jsp文件中,可以使用response.addHeader方法修改header,在所有页面都会包含的公共文件中加入即可。更好的办法是写一个Filter,对json请求的路径拦截,修改header:
HttpServletResponse httpResponse = (HttpServletResponse)response;
httpResponse.addHeader("Access-Control-Allow-Origin", "*");
对于iframe跨域的问题,可以将设置“P3P"为"CP=CAO PSA OUR"。
2. 修改header的Access-Control-Allow-Headers
在新版的Chrome浏览器下,上述方法仍然无法达到目的,需要将header的Access-Control-Allow-Headers设为Origin, X-Requested-With, Content-Type, Accept。
3. 修改Sencha Touch
一般情况下跨域问题已经解决了。在Sencha Touch下发现每一个Ajax请求都发送了两次,其中一次的请求方法为OPTIONS。我只知道常用的Get、Post,听说过Put、Delete。查过后才知道OPTIONS方法是用于获取指定URL能接收的请求方法。我用jQuery发送GET请求没有出现,手写HttpXmlRequest也没有出现。这样的问题在StackOverFlow和Sencha论坛上也看到有不少人遇到。用Web调试工具找发送OPTIONS请求的地方,没有找到。对于jQuery和Sencha的http请求头,发现了问题所在。Sencha发送的头中包含了X-Requested-With的头,jQuery中没有。估计是这个请求头触发了浏览器去探测该URL可用的请求方法。大多服务器都不支持这个方法,觉得Sencha这么做是多此一举了。如果是使用Ext.Ajax.request发送请求,直接在配置中写useDefaultXhrHeader : false就可以了。但是这里是将请求用在Ext.data.Store中,不支持这个配置。懒得该太多源文件支持这个配置,直接将Connection.js中这个配置的默认值改为false。
另外还遇到Sencha Touch编译的坑。特定版本编译报Logger.js不存在,需要将app.json中的buildOptions下logger的值由"no"改为"false"。接下来需要解决的sencha touch的坑是开发环境运行问没问题,编译后界面部分不显示,交互出问题。
感谢IBM实习的机会,让我学会了Web调试。感谢万能的StackOverFlow,能找到各种问题的解决方案。