如何避免在上传文件时出现CORS预检请求？

Question

我正在使用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,deflate,sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2
是否有避免这种额外的预检请求的方法？

据我所知，文件上传请求是一个CORS简单请求，因为它是HTTP POST，具有Content-Type multipart / form-data并且仅简单的请求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. 

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

Answer 1

问题是XHR标头未与请求一起发送给Cloudinary，这导致Cloudinary重定向（IE后备）而不是返回JSON。这通常是由于窗口小部件的初始化不正确引起的。通常，您不需要自己调用$('.cloudinary-fileupload').fileupload()，因为这是通过随附的Javascript完成的。如果仍然需要手动初始化小部件，请使用$('.cloudinary-fileupload').cloudinary_fileupload()。

Answer 2

对于那些对javascript提取感兴趣的人。这是适用于云端上传的代码。以下是针对react组件的信息，但提取几乎可以在任何javascript代码中正常工作。我也确实配置了nginxserver，但这仅通过代理。需要注意的要点是，使用FormData对象设置upload_preset和文件参数。避免标题，并做一个简单的帖子。