AJAX 查询在迁移到 AWS 后不起作用 $ CloudFront

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 发行版。

“www.atmocean.com.au”已使用 AWS 证书管理器配置了 SSL 证书。

“assets.atmocean.com.au”也包含在 SSL 证书中，并映射到 S3 存储桶的云端分发。

在 S3 存储桶中包含带有 .web 后缀的 xml 格式文件（这些文件由专有软件生成。）

查看相关网页时，chrome控制台显示如下错误：“Uncaught TypeError: Cannot read property 'getElementsByTagName' of null”

此错误与此行有关：

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');

有了这一变化，世界就一切安好。 （至少我的功能。）