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,能找到各种问题的解决方案。

目录
相关文章
|
3月前
|
API
electron 下网页获取 micphone 权限
electron 下网页获取 micphone 权限
Meego touch实现页面跳转和返回
前面写完了第一个Meego touch的程序,相信大家也看到Meego touch的界面风格,显示效果等等。不过却没有页面跳转,和返回等效果,那这篇文章就研究下,如何实现页面的跳转和返回?Meego touch默认会通过返回键或者退出键实现当前页面的关闭,并且返回到前一个页面。
942 0
|
Web App开发 JavaScript Apache
Sencha extjs 的安装
delphi 的母公司Idera 突然就把sencha extjs 收购了,这确实是一个很好的消息,意味着delphi 开始在web方面开始发力, 目前delphi 集成extjs 的呼声越来越强烈,emb 官方也在开始做这一方面的工作。
1762 0
|
应用服务中间件 Android开发 前端开发
|
iOS开发
iOS开发--3D Touch的基本使用
1.桌面快捷菜单项 效果如图: 1.桌面快捷菜单项 效果如图: 1.桌面快捷菜单项 效果如图: 桌面快捷菜单 点击之后的效果如图: 点击桌面快捷菜单的效果 接下来看下具体实现:1).在-application:didFinishLaunchingWithOptions:方法中用-setShortcutItems:方法来添加快捷菜单项。
|
Web App开发 网络架构
Sencha Touch 历史支持
路由、深链接以及后退按钮 Routing, Deep Linking and the Back Button Sencha Touch 2 提供完整的历史与深链接的支持,使得我们的 Web 应用拥有以下两点大的好处: 浏览器的“后退”按钮在你的应用中有效了,也就是说,虽然按下了后退键,但浏览器并不会立刻刷新,而是仍停留在当前的页面中。
906 0
|
JavaScript 前端开发 PHP
CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:
  购买阿里云相关服务,这里可以领取优惠券, 有的产品5折优惠哟, 注意, 领取的优惠券30天内有效,尽快使用:领取方式:进入链接后 页面下拉 一键领取全部 或者按需每次领取对应的优惠,领取链接:点击此处链接领取https://promotion.
1264 0
|
SQL JavaScript .NET
sencha Touch 2.4 学习之 XTemplate模板
XTemplate模板 DEMO Ext.onReady(function() { //数据源 var data = { ...
1252 0
|
容器
Sencha Touch xtype对应的class
Sencha Touch 2的有效xtype   xtype Class ----------------- --------------------- actionsheet Ext.
825 0