html5中manifest如何对fallback进行跨域请求，纯前端解法

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4519 天前的主题，其中的信息可能已经有所发展或是发生改变。

例子：
FALLBACK:
http://a.domain.com/getjson http://b.domain.com/offline.json

该manifest文件位于b.domain.com上面

正常情况下，这样的FALLBACK是不允许的。
有没有什么方法，可以不使用后端代理的情况下，实现这样的跨域呢？

我自己已经尝试过了设置document.domain的方式，但FALLBACK依然无效，感觉是manifest文件先执行了，再执行的document.domain，所以根本不起作用。

<h3>为什么不用代理？</h3>
因为a.domain.com是一个提供API的服务器集群，设计的时候就考虑到大并发的，如果设置了代理，容易出现单点故障，同时这个代理所承受的压力也非常大，那么API当初的部署就都白费了。

<h3>为什么要把业务放在b.domain.com而不放在a.domain.com上面，这样就啥跨域问题都没了？</h3>
这个是基于日后维护、命名等考虑的。

<h3>通过applicationCache对象来自动判断网络状况，处理请求</h3>
这个是最后一个方案，当applicationCache对象得知当前浏览器online的时候，正常访问http://a.domain.com/getjson，当applicationCache对象得知浏览器offline的时候，让浏览器去访问offline.json，并且在manifest中，设置offline.json为CACHE。
这种方式就完全弃用了FALLBACK的机制，实现比较麻烦，所以这个是最后没办法中的办法。

集思广益，我之前搜索了一下，发现FALLBACK的相关资料很少。

我来AT几个前端帮忙解答，如果打扰了，请原谅...

@CatChen @underone @bang590 @dndx @hotoo @wangyan @loo2k @hzlzh @sofish @alanoy

domain

Fallback

4 条回复 • 1970-01-01 08:00:00 +08:00

qq286735628

2012-08-03 19:20:38 +08:00

方案2：设置302重定向

把FALLBACK内容更改为:
http://b.domain.com/getjson http://b.domain.com/offline.json

然后在b.domain.com中设置rewrite，把http://b.domain.com/getjson 重定向302到http://a.domain.com/getjson

此方式，FALLBACK符合了同源规则，b.domain.com/offline.json会被浏览器cache

浏览器online的情况下，依然可以正常访问到a.domain.com/getjson，而离线的时候，则访问b.domain.com/offline.json

潜在问题：
和使用Proxy一样，存在单点问题，不过这里不需要处理什么逻辑之类的，纯粹的接请求，然后redirect，瓶颈在并发连接上。
JS的XMLHttpRequest对302的反应会怎样？会不会把结果给Cache了？

我这里想了两个方法，不知道其他人还有没有什么好建议

spritevan

2012-08-03 19:25:37 +08:00

jsonp

hzlzh

2012-08-04 09:55:46 +08:00

这部署是API+APP做法，跨域可以用jsonp，如果用jQuery做范例如下：
http://api.jquery.com/jQuery.getJSON/
看最后一个例子，Flickr相当与API，jQuery.com相当于是
APP。

用代理和重定向的方法不推荐。我以前用过php去load Twitter API放在站A，然后在站
B,C,D用js跨域去拿数据的方法免翻墙弄到Timeline。

qq286735628

2012-08-04 23:43:54 +08:00

@spritevan @hzlzh

先谢谢两位的回答，不过这里情况有些不一样，我不是单单为了跨域，所以JSONP的方式，这里没有效果。

我是在尝试一个离线应用，使用html5的applicationCache对象实现。

manifest离线清单里面，有FALLBACK这一项，里面的URL有同源请求的规定。

我是想直接通过HTML5的manifest的特性，来实现在线与离线的时候加载不同的数据。并且这些数据来自外部API。

这样就不同源了。