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

时间: 2024-12-31 10:51:23

Sencha Touch跨域问题解决的相关文章

Ajax跨域问题解决(Ajax JSONP)

因WEB安全原因,Ajax默认情况下是不能进行跨域请求的,遇到这种问题,自然难不倒可以改变世界的程序猿们,于是JSONP(JSON with Padding)被发明了,其就是对JSON的一种特殊,简单来说就是在原有的JSON数据上做了点手脚,从而达到可以让网页可以跨域请求.在现在互联网技术对"前后分离"大规模应用的时期,JSONP可谓意义重大啊. 假设我们原来的JSON数据为 {"hello":"你好","veryGood":

javascript中AJAX 跨域问题解决方法

最近在开发过程中,使用ajax去异步调取图片.在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题. ajax本身是不支持跨域的,这是由于javascript的同源策略所导致.但是我们可以通过其他方法来解决ajax的跨域问题. 1  由于我们是利用了jquery来写的ajax,我们一开始是准备 利用jsonp来解决的,客户端类似下面写法  代码如下 复制代码 $.ajax({     type : "get",     async:false,  

iframe全跨域高度自适应解决方案

看到这个需求的时候就在暗爽,又可以搞定一个知识点了.哈哈,一天的奋斗之后,果然有所收获,而且经过怿飞的指点,在跨域问题解决上还有所突破(不通过hash).看Demo,兼容IE,FF,Safari. 方案说明: 需求是:A页面(taobao.com)要嵌入B页面(alibaba.com),因为不能确定B页面的高度,所以要求高度自适应.解决方法:简单来说就是在B页面里创建一个和A同域的iframe C,让C和A之间可以通讯,以把B的高度传过去.那么怎么传过去呢?以前的方法是在C里改变parent.p

jQuery 跨域访问解决原理案例详解_jquery

浏览器端跨域访问一直是个问题,多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明.yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了.好在,有jQuery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题...有必要记下来备忘, 跨域的安全限制都是指浏览

有关Ajax跨域问题的两种解决方法_AJAX相关

概述 Ajax跨域是前端开发中常见的问题,本文描述了以Google浏览器Chrome作为客户端和以Tomcat作为Web服务器的情况下的解决办法. 问题现象 当出现跨域访问的时候ajax通常会报类似如下错误: XMLHttpRequest cannot load http://192.168.2.12:8001/oss/api/version/check. No 'Access-Control-Allow-Origin' header is present on the requested re

javascript跨域方法、原理以及出现问题解决方法(详解)_javascript技巧

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域      基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain

jquery 跨域访问问题解决方法(笔记)_jquery

这两天需要实现三级域名直接url rewrite到网站静态页面,如 http://123.456.789.com/ UrlRewrite到http://www.789.com/news/123.html 说到这里,也许和js跨域访问没有半点关系,在脑海里排列这的问题都是和UrlRewrite相关的.好吧现在URLRewrite一切就绪,直接在浏览器地址栏中输入http://123.456.789.com/ 会发现,这个在地址栏直接通过http://www.789.com/news/123.htm

jQuery 跨域访问问题解决方法_jquery

时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的, 所以通过本机服务器端通过类似httpclient方式完成"跨域访问"的工作,然后在浏览器端用AJAX获取本机服务器端"跨域访问"对应的url.来间接完成跨域访问也是可以

Ajax跨域请求 JSON JSONP

同源策略和跨域-总结 目录: 1.同源策略 2.跨域 3.几种跨域技术   1.同源策略 什么叫同源? URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源.相反,只要协议,域名,端口有任何一个的不同,就被当作是跨域. e.g. 对于http://store.company.com/dir/page.html进行同源检测: URL 结果 原因 http://store.company.com/dir2/other.html 成功 仅路径不同 http://st