互联网给我们带来方便的同时，也时常让我们感到困惑。随便搜搜就出一大堆结果，然而总是有大量的重复和错误。小妖发出的内容，都是自己实测过的，有问题请留言。

在耗费近一个小时，打开近二十个页面，综合了 stackoverflow，jb51，github，blog.sina，zhihu，iteye，developer.mozilla 各路神仙的解决方案之后，小妖终于搞定了用 WebUploader 跨域上传的问题！一边有点小激动，一边心中有一万头 ** 飘过。

赶紧记录下来，分享给大家。

Server 部分：

设置一个白名单，如果发现请求来源在你的白名单内，就设置两个 header:

Access-Control-Allow-Origin:http://xxx.xx.xx

Access-Control-Allow-Credentials:true

那么下面的 $_SERVER['REQUEST_METHOD'] == 'OPTIONS' 是什么意思呢？

我们抓包看一下：

浏览器在发送跨域请求前，会先以 OPTIONS 请求方式发送一个预请求(preflight request)，从而获知服务端对跨域请求是否支持。在确认服务端允许跨域请求的情况下，再以实际的 HTTP 请求方法发送那个真正的请求。也就是说，服务端在收到 OPTIONS 请求时，只需要返回 header 告诉浏览器我这边支持跨域请求就可以了，不必执行相应逻辑，浏览器接下来会再次请求。

JS 部分：

可以看到，跨域时，WebUploader 默认配置是不支持携带 cookie 的。我们需要在初始化时设置 withCredentials 为 true:

当然，如果上传文件时不需要携带 cookie，可以省略这一步。抓包时我们可以看到，浏览器发送 OPTIONS 请求时，是不会携带 cookie 的，这个需要注意下，小妖在这里纠结了很久，对 OPTIONS 请求只返回 header 就可以了。

兼容性

Chrome 4，Firefox 3.5，IE10，Opera 12，Safari 4

如果需要兼容IE8、9，是不是还逃不开 iframe 呢？小妖还没找到其他解决方案。如有大神路过，请指教！