jquery fileupload设置http request headers

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

所以下面的配置在服务端比较常见：

cres.getHeaders().add("Access-Control-Allow-Origin", "*");
cres.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept");
cres.getHeaders().add("Access-Control-Allow-Credentials", "true");
cres.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
cres.getHeaders().add("Access-Control-Max-Age", "1209600");

其中Access-Control-Allow-Headers控制请求方法中可以包含的请求头，本文要谈的内容跟这个有很大的关系，一般出于安全考虑，我们会在服务器后端校验一些参数判断用户是否已登录，这些参数一般会在ajax请求头里面设置，为了防止某些ajax请求忘记在请求头中传递token等参数，一般会有下面的ajax全局设置：

   $.ajaxSetup({
　　　　beforeSend: function (request) {
request.setRequestHeader("token", xx);
                   request.setRequestHeader("xx", xx);
                }
　　});

这些可能出现的情况就是：不同的服务器后端配置的Access-Control-Allow-Headers参数不一样，导致某些请求无法调用相应的服务，笔者在使用jquery fileupload的时候就出现了这个问题，其他同事加了这个全局配置导致文件无法上传了，

$('#fileupload').fileupload({
    url: '/path/to/upload/handler.json',
    sequentialUploads: true
});

为了防止ajax的beforeSend的全局配置影响到fileupload的使用，我们就需要配置fileupload的beforeSend属性来过滤掉ajax的全局配置，然后在fileupload的beforeSend方法中设置自己需要的http请求头，具体配置如下：

$('#fileupload').fileupload({

url: '/path/to/upload/handler.json',

sequentialUploads: true，

beforeSend: function(xhr, data) {
xhr.setRequestHeader('token', xxxxx);
}

});

jquery fileupload设置http request headers

猜你喜欢