2017-06-06 59 views
1

這是我下面的代碼。當使用XMLHttpRequest來下載圖像,我得到這個錯誤

storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) { 
     // `url` is the download URL for 'images/stars.jpg' 

    // This can be downloaded directly: 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 
    xhr.onload = function(event) { 
    var blob = xhr.response; 
    }; 
    xhr.open('GET', url); 
    xhr.setRequestHeader('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); 
    xhr.setRequestHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); 
    xhr.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type'); 
    xhr.send(); 

    // Or inserted into an <img> element: 
    var img = document.getElementById('myimg'); 
    img.src = url; 
}).catch(function(error) { 
    // Handle any errors 
}); 

但因爲它說我不能下載映像文件:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:8000 ' is therefore not allowed access.

不過,我成功地在我的img標籤顯示的圖像。如果我可以下載它也會很好。

我使用本地主機運行此。

更新: 這是新的錯誤:

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

+1

請不要在圖像的代碼... –

+0

問題是CORS問題 - 顯然URL不相同的來源頁面本身 - 無論服務器上的圖像是來自顯然不允許這樣的要求 - 這樣...什麼服務器爲圖像提供服務?它不是'http:// localhost:8000'是否 –

+0

@JaromandaX你有鏈接如何正確使用CORS下載使用XmlHttpRequest? –

回答

1

必須在您的服務器添加標題:

header('Access-Control-Allow-Origin', '*'); 
header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); 
header('Access-Control-Allow-Headers', 'Content-Type'); 

例如,這將使方法的所有域指定和頭。

+0

感謝您的提示 –

+0

這不是一個提示,它是解決方案...如果您無法訪問服務器,則必須請求管理員添加您的域以便從您的域訪問其資源。 –

+0

如果你有時間的話,你可以幫我: 「請求頭字段訪問控制允許來源不受接入控制允許的報頭預檢響應允許的。」 問題? –

相關問題