webuploader使用h5跨域上传时主要遇到2个问题

  1. 浏览器报错如下
1
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
  1. 跨域post没有带着cookie

解决办法

1
2
3
4
5
6
7
$header = $this->request->getHeaders();

// 解决预检没有Access-Control-Allow-Origin
$response->setHeader("Access-Control-Allow-Origin",$header["Origin"]);

// 解决跨域post没有cookie
$response->setHeader("Access-Control-Allow-Credentials","true"); 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
uploader = WebUploader.create({
    auto:true,
    // swf文件路径
    swf: BASE_URL + '/js/Uploader.swf',
    // 文件接收服务端。
    server: uploadApi,
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#filePicker',
    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false,
    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    // 携带cookie
    withCredentials : true,
});

原因

某些跨域请求，浏览器会自动“预检”priflight，使用OPTION请求
也就是说，真正POST之前，浏览器会自动发送OPTION请求，请注意!!!这个请求似乎没有办法携带cookie，如果是有登录判断要提前处理
这时回复Access-Control-Allow-Credentials，要求 真正的POST请求要带上cookie
Access-Control-Allow-Origin是允许跨域

webuploader 只要在初始化时增加配置 withCredentials 即可携带cookie请求

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
http://blog.csdn.net/qq_35334476/article/details/77684952