jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 如何避免文件上传时的CORS预检请求?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用 jquery-fileupload来允许用户文件上传到外部服务(Cloudinary更具体):

<input type='file' name='file' class='cloudinary-fileupload' 
  data-url='https://api.cloudinary.com/v1_1/wya/auto/upload' />
<script>
  $('.cloudinary-fileupload').fileupload();
</script>

由于它是外部目标,因此浏览器会发起CORS请求.但是,我注意到浏览器会预先设置CORS预检请求.
http://www.html5rocks.com/en/tutorials/cors/提供了关于何时触发预检请求以及何时未触发预检请求的非常好的见解.据我所知,我的请求符合CORS简单请求的所有标准(参见第‘Types of CORS requests’节).

发送到外部服务的文件上载请求:

POST /v1_1/wya/image/upload http/1.1
Host: api.cloudinary.com
Connection: keep-alive
Content-Length: 22214
Accept: */*
Origin: http://wya.herokuapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/32.0.1700.107 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarym73rCIa6t8eTNkTa
Referer: http://wya.herokuapp.com/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2

文件上载请求之前发送到外部服务的附加预检请求:

OPTIONS /v1_1/wya/image/upload http/1.1
Host: api.cloudinary.com
Connection: keep-alive
Access-Control-request-Method: POST
Origin: http://wya.herokuapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/32.0.1700.107 Safari/537.36
Access-Control-request-Headers: accept,content-type
Accept: */*
Referer: http://wya.herokuapp.com/
Accept-Encoding: gzip,de;q=0.2

有没有办法避免这个额外的预检请求?据我所知,文件上传请求是一个CORS简单请求,因为它是带有Content-Type multipart / form-data的http POST,只有简单的请求http头.

我想摆脱额外的预检请求的原因是Cloudinary发送http 302/304重定向作为对文件上传的响应.浏览器不遵循这些重定向. Chrome失败并显示以下消息:

XMLhttprequest cAnnot load https://api.cloudinary.com/v1_1/wya/image/upload. 
The request was redirected to 'http://wya.herokuapp.com/upload?bytes=21534&created_at=2014-02-12T09%3A04%3…d5b62ebb92b9236e5be6d472df242d016&type=upload&version=1392195882&width=723',which is disallowed for cross-origin requests that require preflight.

解决方法

问题是XHR头不会随Cloudinary的请求一起发送,导致Cloudinary重定向(IE回退)而不是返回JSON.这通常是由于窗口小部件的初始化不正确引起的.您通常不需要自己调用$(‘.cloudinary-fileupload’).fileupload(),因为这是由包含的Javascript完成的.如果您仍需要手动初始化窗口小部件,请使用$(‘.cloudinary-fileupload’).cloudinary_fileupload().

大佬总结

以上是大佬教程为你收集整理的jquery – 如何避免文件上传时的CORS预检请求?全部内容,希望文章能够帮你解决jquery – 如何避免文件上传时的CORS预检请求?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。