2014-02-24 280 views
2

我想使用plupload庫將文件上傳到遠程服務器。一切適用於Chrome(32.0)和IE 10使用html5運行時,但當我嘗試使用Firefox 27(html5運行時)或IE 8(html4運行時)時,出現錯誤Error #-200: HTTP Error.Plupload跨域上傳200 http錯誤

客戶端腳本:

$(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 

了Serverside腳本:

<?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 headers

我想不通爲什麼它不與Firefox和IE8工作。

感謝您的幫助。

我剛剛嘗試過使用Flash運行時:它與Chrome和IE 10一起使用,但與Firefox和IE8不兼容。奇怪的是,該alert(info['runtime']);不再出現,但沒有JavaScript錯誤控制檯...

+0

我不確定,但我認爲某些瀏覽器可能會向服務器發送預檢檢查請求以檢查標題(我對於確切的細節有點模糊),可能會在此處提供一些信息:http:// stackoverflow.com/questions/13614802/jquery-ajax-request-called-twice-and-the-first-request-does-not-send-token-in-he –

回答

0

好吧,我終於找出它爲什麼不工作。我使用wireshark進行了檢查,發現有一個encrypted alert

我再檢查使用遠程服務器的證書:http://www.sslshopper.com/ssl-checker.html並得到了這樣的回答:

證書並不是在所有網絡瀏覽器信任。您可能需要安裝中間體/鏈式證書才能將其鏈接到受信任的根證書。詳細瞭解此錯誤。解決此問題的最快方法是聯繫您的SSL提供商。

我不得不添加一個例外,它終於摸索\ O/

0

有用的鏈接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迴應,否則OPTIONS請求CORS將失敗。

如果您需要進行調試,Google Chrome瀏覽器中的Web Inspector會做出相當出色的工作,指出哪些是CORS請求失敗的原因。

+0

您可以在我的serverside腳本中看到我已經設置了「Access-Control-Allow-Headers:Content-Type」。另外一切工作正常與Chrome的問題是與Firefox和你可以在截圖中看到,我已經使用Web Inspector。 – Techbrunch

0

當你得到一個服務器端的500錯誤也提出了這個錯誤。例如,如果您的程序中有語法錯誤(或致命的運行時錯誤)。