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

目录
相关文章
|
5月前
|
JavaScript 数据安全/隐私保护
Cypress初体验,写一个成功login的脚本
Cypress初体验,写一个成功login的脚本
Meego touch实现页面跳转和返回
前面写完了第一个Meego touch的程序,相信大家也看到Meego touch的界面风格,显示效果等等。不过却没有页面跳转,和返回等效果,那这篇文章就研究下,如何实现页面的跳转和返回?Meego touch默认会通过返回键或者退出键实现当前页面的关闭,并且返回到前一个页面。
939 0
|
Web App开发 JavaScript Apache
Sencha extjs 的安装
delphi 的母公司Idera 突然就把sencha extjs 收购了,这确实是一个很好的消息,意味着delphi 开始在web方面开始发力, 目前delphi 集成extjs 的呼声越来越强烈,emb 官方也在开始做这一方面的工作。
1757 0
|
应用服务中间件 Android开发 前端开发
|
图形学
UNITY WWW使用代码
string detailURL = "https://www.xxx.xxx."; using (var w = new WWW(detailURL)) { yield return w; if (!string.
|
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 应用拥有以下两点大的好处: 浏览器的“后退”按钮在你的应用中有效了,也就是说,虽然按下了后退键,但浏览器并不会立刻刷新,而是仍停留在当前的页面中。
903 0
|
JSON 前端开发 数据格式
extjs6 desktop 桌面多主题切换
extjs6 desktop想实现多主题切换,因为项目要编译,不像extjs4一样方便的切换主题,采用Ext.util.CSS.swapStyleShee的API进行切换主题,虽然可以无刷新即时切换,但有原主题残留,导致多主题叠加的现象,效果并不理想,因此,找到以下方法实现切换。
1350 0
|
SQL JavaScript .NET
sencha Touch 2.4 学习之 XTemplate模板
XTemplate模板 DEMO Ext.onReady(function() { //数据源 var data = { ...
1247 0