移至AWS $ CloudFront后AJAX查詢不起作用

Question

潛伏了很長時間之后，該問我第一個問題了……

我在使用AJAX查詢時遇到了麻煩，該查詢在移至AWS之前曾經可以工作。

以前，我的網站托管在WAMP服務器上以進行測試和開發，並且以下相關代碼可以正常工作。

//Read XML file from disc and send file content to other functions\\
function Get_XML_File(){
    var XML_File_Path = File_Path + Client_Code + '/' + ID + '/' + ID + '_Analysed_Wave.web'
    var xhttps = new XMLHttpRequest();

    xhttps.onreadystatechange = function() {
        if (xhttps.readyState == 4 && xhttps.status == 200){ 
            Read_Meta_Data(xhttps)
            Read_Time_Status(xhttps)
            Read_Wave_Height(xhttps)
        ;}
    };

    xhttps.open("GET", XML_File_Path, true);
    xhttps.send();
}   
//Extract Header Data from XML file\\
function Read_Meta_Data(xml) {
    var xmlDoc = xml.responseXML;

    // Client//
    var Client_ID = xmlDoc.getElementsByTagName('Client_ID')[0].childNodes[0]
    var Client_Name = xmlDoc.getElementsByTagName('Client_Name')[0].childNodes[0]

最近，此站點已通過AWS移至Elastic Beanstalk發行版。

已使用AWS證書管理器為“ www.atmocean.com.au”提供了SSL證書。

SSL證書也涵蓋了“ assets.atmocean.com.au”，並將其映射到S3存儲桶的雲端分布。

在S3存儲桶中是帶有.web后綴的xml格式的文件（這些文件是由專有軟件生成的。）

查看相關事件網頁時，Chrome控制台顯示以下錯誤：“未捕獲的TypeError：無法讀取null的屬性'getElementsByTagName'”

此錯誤是參考以下行：

var Client_ID = xmlDoc.getElementsByTagName('Client_ID')[0].childNodes[0]

我不明白的是，當查看開發者控制台的“網絡”選項卡時，資源顯示為正確加載，狀態碼為200。此外，可以在“響應”選項卡中查看文件內容。

這是否意味着文件已從服務器正確下載到客戶端？

如果是這樣，為什么以前沒有錯誤的代碼現在無法獲取文件內容？

是否需要通過彈性beantalk（或其他方式）提供除標准網站配置之外的其他內容？

謝謝您的期待。

Answer 1

您收到HTTP 200，這意味着服務器可以理解該請求並可以完全滿足該請求，但是隨后它交付了內容，當您執行Read_Meta_Data這並不意味着已經交付了全部內容

您可以添加console.log(xml)和console.log(xmlDoc)以查看進度的當前內容

我建議您在傳輸完成時利用您的代碼添加一個偵聽器

var xhttps = new XMLHttpRequest();
xhttps.overrideMimeType('text/xml');
xhttps.addEventListener("load", transferComplete, false);

function transferComplete(evt) {
  // from here your transfer has been completed
}

注意：還有一個loadend方法，該方法在加載完成時運行（無論加載成功與否-從未使用過）

Answer 2

弗雷德里克，

感謝您的答復。 線索在以下行中：

xhttp.overrideMimeType('text/xml');

因為xml文件使用自定義文件擴展名，所以它已作為文本字符串返回。

我將功能更改為現在如下：

//Read XML file from disc and send file content to other functions\\
function Get_XML_File(){
    var XML_File_Path = File_Path + Client_Code + '/' + ID + '/' + ID + '_Analysed_Wave.web'
    var xhttp = new XMLHttpRequest();
    xhttp.overrideMimeType('text/xml');

    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200){ 
            Read_Meta_Data(xhttp)
            Read_Time_Status(xhttp)
            Read_Wave_Height(xhttp)
        ;}
    };

    xhttp.open("GET", XML_File_Path, true);
    xhttp.send();
}   


xhttp.overrideMimeType('text/xml');

有了這一改變，整個世界都變得很好。 （至少是我的功能。）