Plupload跨域上传200 http错误答案

【问题标题】：Plupload crossdomain upload 200 http errorPlupload跨域上传200 http错误
【发布时间】：2014-03-26 03:14:01
【问题描述】：

我想使用 plupload 库将文件上传到远程服务器。一切都适用于使用 html5 运行时的 Chrome（32.0）和 IE 10，但是当我尝试使用 Firefox 27（html5 运行时）或 IE 8（html4 运行时）时，我收到错误 Error #-200: HTTP Error.。

客户端脚本：

$(function() {
var uploader = new plupload.Uploader({
    browse_button: 'browse',
    url: 'https://remote.com/API/action.php',
    runtimes : 'html5,flash,silverlight,html4',
    flash_swf_url : './js/Moxie.swf',
    silverlight_xap_url : './js/Moxie.xap'
});

uploader.init();
uploader.settings.multipart_params = { 
       [...]
};

// PreInit events, bound before any internal events
uploader.bind('init', function(up, info) {
        console.log('[Init]', 'Info:', info, 'Features:', up.features);
        alert(info['runtime']);
});

uploader.bind('Error', function(up, err) {
    document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
});

document.getElementById('start-upload').onclick = function() {
    uploader.start();
};

});

Chrome 的第一个请求：

Request URL:https://remote.com/API/action.php
Request Method:OPTIONS
Status Code:200 OK

对 Chrome 的第二次请求：

Request URL:https://remote.com/API/action.php
Request Method:POST
Status Code:200 OK

请求标头

Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:hipt.ucc.ie
Origin:http://server.com
Pragma:no-cache
Referer: XXX
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36

响应标头

Access-Control-Allow-Headers:Content-Type, Authorization, X-Requested-With
Access-Control-Allow-Methods:GET, PUT, POST, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1000
Cache-Control:no-cache
Connection:close
Content-Length:5
Content-Type:text/html; charset=UTF-8
Date:Mon, 24 Feb 2014 11:57:54 GMT
Server:Apache/2.2.3 (CentOS)
X-Powered-By:PHP/5.1.6

服务器端脚本：

<?php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Cache-Control: no-cache');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

if (!empty($_FILES)) {

对于 Firefox，使用 OPTIONS 方法的请求的响应是空的，并且没有后续的 POST 请求。

这里是 Firefox 标头：

我不明白为什么它不能与 Firefox 和 IE8 一起使用。

感谢您的帮助。

[编辑] 我刚刚尝试过使用 flash 运行时：它适用于 Chrome 和 IE 10，但不适用于 Firefox 和 IE8。奇怪的是，alert(info['runtime']); 没有出现，但控制台中没有 javascript 错误...

【问题讨论】：

我不确定，但我认为某些浏览器可能会向服务器发送预检检查请求以检查标头（我对确切的细节有点模糊），这里可能有一些信息：stackoverflow.com/questions/13614802/…

标签： html firefox internet-explorer-8 cross-domain plupload

【解决方案1】：

Plupload 跨域上传 200 http 错误的有用链接：

1: http://weblog.west-wind.com/posts/2013/Mar/12/Using-plUpload-to-upload-Files-with-ASPNET

2: http://www.bennadel.com/blog/2502-Uploading-Files-To-Amazon-S3-Using-Plupload-And-ColdFusion.htm

3: http://www.plupload.com/punbb/viewtopic.php?id=4000

4: https://github.com/moxiecode/plupload/wiki/Frequently-Asked-Questions

plupload 还设置了 Content-Type 标头，因此您的服务器也必须以 Access-Control-Allow-Headers: Content-Type 响应，否则 CORS 的 OPTIONS 请求将失败。

如果您需要对此进行调试，Google Chrome 中的 Web Inspector 可以很好地指出您的 CORS 请求失败的原因。

【讨论】：

您可以在我的服务器端脚本中看到我已经设置了Access-Control-Allow-Headers: Content-Type。 Chrome 也一切正常，问题出在 Firefox 上，您可以在屏幕截图中看到我已经使用了 Web Inspector。

【解决方案2】：

好的，我终于知道为什么它不起作用了。我使用wireshark进行了检查，发现有一个encrypted alert。

然后我使用：http://www.sslshopper.com/ssl-checker.html 检查远程服务器的证书并得到这个答案：

并非所有网络浏览器都信任该证书。您可能需要安装中间/链证书以将其链接到受信任的根证书。了解有关此错误的更多信息。解决此问题的最快方法是联系您的 SSL 提供商。

我不得不添加一个异常，它终于工作了\o/

【讨论】：

【解决方案3】：

当您收到服务器端 500 错误时也会引发此错误。例如，如果您的程序中有语法错误（或致命的运行时错误）。

【讨论】：

【解决方案4】：

我有同样的问题，但我清楚地知道问题出在 csrf 令牌中。解决方法如下：

HTML：

<HTML>

<body>
<p>your template content</p>

<!-- upload demo -->
<ul id="filelist"></ul>
<br />
<pre id="console"></pre>
<div id="container">
<a id="browse" href="javascript:;">[Browse...]</a>
{% csrf_token %} <!-- it may be places elsewhere in HTML -->
<a id="start-upload" href="javascript:;">[Start Upload]</a>
</div>
<!-- upload demo end -->

<p>your template cont'd</p>

<script type="text/javascript">
// function to get your crsf token from the cookie
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

const crsf = getCookie('csrftoken');

var uploader = new plupload.Uploader({
    browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself
    url: '/upload/',
   chunk_size: '822kb',
   headers: {'X-CSRFToken': crsf}, // here we add token to a header
   max_retries: 1
});
 
uploader.init();

<!-- and so on -->

</script>
</body>
</HTML>

#urls.py
urlpatterns = [
    ...
    path(route='upload/', view=Upload.as_view(), name='upload'),

#views.py
class Upload(View):

    def post(self, request):
        print('got upload post request')
        print(request.headers)
        ## do with the chunk whatever you need...
        return HttpResponse('email good, thank you!', status=200)

这里的例子： https://www.plupload.com/docs/v2/Getting-Started#wiki-full-example

您可以在此处阅读有关设置的信息： https://www.plupload.com/docs/v2/Uploader#settings-property

它适用于 Django 2.1+ 中的 post() 方法

【讨论】：