如何避免CORS预检请求文件上传？ [英] How to avoid CORS preflight request on file upload?

问题描述

我使用jquery-fileupload允许用户将文件上传到外部服务（Cloudinary更具体）：

 < input type ='file'name ='file'c​​lass ='cloudinary-fileupload'
 data-url ='https：//api.cloudinary.com/v1_1/wya/auto/upload'/> ; 
< script> 
 $（'。cloudinary-fileupload'）。fileupload（）; 
   

由于它是外部目标，浏览器启动CORS请求。但是，我注意到浏览器预先CORS预检请求。
http://www.html5rocks.com/en/tutorials/cors/给出了关于何时触发预检请求以及何时不触发预检请求的很好的见解。据我所知，我的请求符合作为CORS简单请求的所有标准（参见'CORS请求的类型。）

发送到外部服务：

  POST / v1_1 / wya / image / upload HTTP / 1.1 
 Host：api.cloudinary。 com 
连接：keep-alive 
内容长度：22214 
接受：* / * 
原产地：http://wya.herokuapp.com 
用户代理：Mozilla / 5.0（Macintosh; Intel Mac OS X 10_9_1）AppleWebKit / 537.36（KHTML，像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 
主机：api.cloudinary.com 
连接：keep-alive 
访问控制请求方法：POST 
原产地：http://wya.herokuapp.com 
 User-Agent：Mozilla / 5.0（Macintosh; Intel Mac OS X 10_9_1）AppleWebKit / 537.36（KHTML，如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， def slate，sdch 
 Accept-Language：sv-SE，sv; q = 0.8，en-US; q = 0.6，en; q = 0.4，de; q = 0.2 
  
 
 
 
 有没有办法避免这个额外的预检请求？就我看来，文件上传请求是一个CORS简单请求，因为它是具有Content-Type multipart / form-data的HTTP POST，并且只有简单的请求HTTP头。
 
 
 
 
 
 
我想要摆脱额外预检请求的原因是Cloudinary发送HTTP 302/304重定向作为对文件上传的响应。浏览器不会遵循这些重定向。 Chrome失败，并显示以下消息：
  XMLHttpRequest无法加载https://api.cloudinary.com/v1_1/wya/image/上传。 
请求已重定向到http://wya.herokuapp.com/upload?bytes=21534&created_at=2014-02-12T09%3A04%3...d5b62ebb92b9236e5be6d472df242d016&type=upload&version=1392195882&width= 723'，
，不允许用于需要预检的跨源请求。 
  
 
 
解决方案
问题是XHR标头不发送对Cloudinary的请求导致Cloudinary重定向（IE回退），而不是返回JSON。这通常是由于小部件的初始化不当造成的。你通常不需要调用 $（'。cloudinary-fileupload'）。fileupload（）自己，这是通过包含的Javascript完成的。如果您仍然需要手动初始化窗口小部件，请使用 $（'。cloudinary-fileupload'）。cloudinary_fileupload（）。
 
I am using jquery-fileupload to allow users to upload files to an external service (Cloudinary to be more specific):
<input type='file' name='file' class='cloudinary-fileupload' 
  data-url='https://api.cloudinary.com/v1_1/wya/auto/upload' />
<script>
  $('.cloudinary-fileupload').fileupload();
</script>
Since it is an external target, the browser initiates a CORS request. However, I noticed that the browser prepends a CORS preflight request. 
http://www.html5rocks.com/en/tutorials/cors/ gives pretty good insights about when a preflight request is triggered and when not. As far as I see, my request fulfills all criteria for being a CORS simple request (see section 'Types of CORS requests').

The file upload request that is sent to the external service:
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
The additional preflight request which is sent to the external service prior to the file upload request:
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,deflate,sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2
Is there a way to avoid this extra preflight request? As far as I see it, the file upload request is a CORS simple request as it is an HTTP POST with Content-Type multipart/form-data and only simple request HTTP headers.



The reason why I want to get rid of the extra preflight request is that Cloudinary sends an HTTP 302/304 redirect as a response to the file upload. Browsers do not follow those redirects. Chrome fails with the following message:
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. 

解决方案
The problem is that the XHR header is not sent with the request to Cloudinary which causes Cloudinary to redirect (IE fallback) instead of returning the JSON. This is usually caused because of improper initialization of the widget. You usually don't need to call $('.cloudinary-fileupload').fileupload() yourself as this is done by the included Javascript. If you still need to initialize the widget manually, please use $('.cloudinary-fileupload').cloudinary_fileupload().

                        
这篇关于如何避免CORS预检请求文件上传？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！