webuploader 跨域问题

     项目中用到了上传组件 ，经过对比决定使用Webuploader 。详细使用文档请参考官方文档：官方文档。这里只介绍垮与问题。

Webuploader上传，会执行2个请求；一个option请求，一个post（根据你的webuploader的配置method 值决定），需要在option请求中对响应头进行处理，post响应头也进行响应的处理。

第一种：以servlet为例：

@WebServlet(description = "文件上传",value ={"/file/upload"})
public class FileUpload extends HttpServlet {

    public FileUpload() {
        super();
    }

    @Override
    protected voiddoPost(HttpServletRequest req, HttpServletResponse resp)throwsServletException, IOException {

               //安全考虑，建议不要添加*，用固定服务器域名
       resp.setHeader("Access-Control-Allow-Origin", "*");
       resp.setHeader("Access-Control-Allow-Methods", "*");
       resp.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");
       resp.setContentType("application/json");
       resp.setCharacterEncoding("utf-8");
        //文件上传逻辑
    }
    @Override
    protected voiddoGet(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected voiddoOptions(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException {
       resp.setHeader("Access-Control-Allow-Credentials","false");
        resp.setHeader("Access-Control-Allow-Origin","*");
       resp.setHeader("Access-Control-Allow-Methods", "*");
       resp.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");
       resp.setContentType("application/json");
        resp.setCharacterEncoding("utf-8");
        super.doOptions(req, resp);
    }

再次测试跨域上传，正常

第二种 前端方法：（与seajs集成易出错）

跨域请求前浏览器会自动发出一个options请求，如果服务器的响应头部中有如下信息：
Access-Control-Allow-Origin: #允许访问的源，如http://localhost:3000
Access-Control-Allow-Methods: #允许的方法，如get, post
浏览器收到这个响应就会继续原来的请求，否则就会终止。
在webuploader中可以在uploadBeforeSend的回调中设置请求的头部，例如

uploader.on('uploadBeforeSend', function(obj,data, headers) {                         

   _.extend(headers, {                                                               

"Origin": http://localhost:3000 ,                                                       

"Access-Control-Request-Method":"POST"                                           

   });                                                                               

});                                                                                    

在服务端的post响应中增加头部：Access-Control-Allow-Origin: http://localhost:3000