开发者社区> johnwong> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Sencha Touch跨域问题解决

简介:
+关注继续查看

之前对于跨域问题仅有粗浅的认识,一般是浏览器层面出于安全性的考虑,不允许调用其他页面的对象。这次在Sencha Touch中解决这个问题额外花掉不少时间。

解决的方法大概就是:

  1. 修改服务器的header;
  2. 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,能找到各种问题的解决方案。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
sencha touch
引用:http://blog.csdn.net/flyerwing/article/details/5826592 Sencha Touch 是第一款基于 HTML5 的手机开发框架,提供五花八门的界面UI组件用以开发丰富特效的手机应用程序。
824 0
sencha Touch 2.4 学习之 XTemplate模板
XTemplate模板 DEMO Ext.onReady(function() { //数据源 var data = { ...
796 0
Sencha Touch 2.1 更新
October 24, 2012 | Jamie Avins http://www.sencha.com/blog/whats-new-in-sencha-touch-2.1/ 啥更新了?What’s New? Sencha Touch 2.1 将是 Sencha 移动框架的下一新版本。
615 0
Sencha Touch 2.4 callParent() 用法
callParent() 用法 方法介绍 用来调用父类的同名方法,并传参,这在从一个框架类派生且要重写诸如onRender这样的方法时会经常看到。 传参方式 1.arguments Ext.define('App.
670 0
sencha touch 学习笔记- 视图与页面(2013网页装在兜里)
      其实今天我不是来写笔记的,作为一名单身屌丝,一直在思考在什么地方放招婚启事的问题,个人觉得,在博客园个人主页左侧开辟一块风水宝地,实在是太完美,恳请园长大人开发这个模块,实现写文章和征婚完美的统一。
856 0
Sencha Touch 2.x 课程内容
利用 Sencha Touch 2 开发出 iPhone、iPad、Android 和黑莓 6+ 的应用。 Sench Touch 2 在 HTML 5 移动开发方面独一无二。本课程集中于 Sencha Touch 2 并涵盖 Touch 1.1 与 Touch 2 之间的跨域。
662 0
sencha touch 学习笔记- ajax、jsonp、dom查找、组件查找、添加css
除了在store中通过代理获取数据外,还可以通过ajax或jsonp方式获取数据,开始学touch时找了半天也没找见ajax的方式。。 这是 使用aiax api 的地址 ajajx http://docs.
668 0
Sencha Touch xtype对应的class
Sencha Touch 2的有效xtype   xtype Class ----------------- --------------------- actionsheet Ext.
557 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载