如何避免CORS预检请求文件上传？

本文介绍了如何避免CORS预检请求文件上传？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

< input type ='file'name ='file'c​​lass ='cloudinary-fileupload' data-url ='https：//api.cloudinary/v1_1/wya/auto/upload'/> ; < script> $（'。cloudinary-fileupload'）。fileupload（）; 由于它是外部目标，浏览器启动CORS请求。但是，我注意到浏览器预先CORS预检请求。 www.html5rocks/en/tutorials/cors/给出了关于何时触发预检请求以及何时不触发预检请求的很好的见解。据我所知，我的请求符合作为CORS简单请求的所有标准（参见'CORS请求的类型。）

发送到外部服务：

POST / v1_1 / wya / image / upload HTTP / 1.1 Host：api.cloudinary。 com 连接：keep-alive 内容长度：22214 接受：* / * 原产地：wya.herokuapp 用户代理：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：wya.herokuapp/ 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 连接：keep-alive 访问控制请求方法：POST 原产地：wya.herokuapp 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：wya.herokuapp/ 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无法加载api.cloudinary/v1_1/wya/image/上传。 请求已重定向到wya.herokuapp/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='api.cloudinary/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. www.html5rocks/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 Connection: keep-alive Content-Length: 22214 Accept: */* Origin: wya.herokuapp 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: wya.herokuapp/ 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 Connection: keep-alive Access-Control-Request-Method: POST Origin: wya.herokuapp 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: wya.herokuapp/ 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 api.cloudinary/v1_1/wya/image/upload. The request was redirected to 'wya.herokuapp/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().