XMLHttpRequest 有问题，或者是加载 gpx 文件的服务器设置问题答案

【问题标题】：problems with XMLHttpRequest or is a server setting problem loading a gpx fileXMLHttpRequest 有问题，或者是加载 gpx 文件的服务器设置问题
【发布时间】：2022-01-04 18:34:08
【问题描述】：

我是意大利人，几乎是 javascripting 和服务器端规则配置的新手。我正在创建一个网页，并打算使用 gpxtruder.xyz 的一部分代码。

我已获得所有者 (Jim Denova jim@anoved.net) 的许可，可以使用原始代码，因为它是根据开源许可发布的。

index.html 页面代码如下：

    <form enctype="multipart/form-data" method="get" name="gpxform">
            <p><input type="radio" name="gpxsource" value="0" id="gpxsource_upload" onchange="return toggle(event, 0, 'gpxfile') && toggle(event, 1, 'gpxsample');" />
                <label for="gpxsource_upload">Upload GPX:</label>
                <input type="file" id="gpxfile" /><br />
               <input type="radio" name="gpxsource" value="1" id="gpxsource_sample" onchange="return toggle(event, 0, 'gpxfile') && toggle(event, 1, 'gpxsample');" checked />
                 <label for="gpxsource_sample">Sample GPX:</label>
                <select id="gpxsample">
                    <option value="0" selected>South Mountain</option>
                    <option value="1">Vestal XX (20k road race)</option>
                </select>
                <h1>Hello, my name is <span id="name"></span></h1>
              <script>
                    let gpxsource = "1"
                let name = gpxsource;
                document.getElementById("name").innerHTML = name;
              </script>

您可以选择预先选择的曲目来显示结果或加载您自己的 gpx 文件

参数被发送到gpxtruder.js文件，跟随部分代码处理数据第一部分代码

    if (radioValue(form.gpxsource) === 0) {
    // Assign a local URL to the file selected for upload
    // https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL
    var files = document.getElementById('gpxfile').value;
                window.alert(gpxfile);
    //var files = document.getElementById('gpxfile').files;
                window.alert(files);
    if (files.length === 0) {
        Messages.error('No GPX file selected.');
        return;
    }
//  upload_url = window.URL.createObjectURL(files[0]);
        upload_url = files
} else {
    if (parseInt(form.gpxsample.value) === 0) {


        upload_url = "https://gpxtruder.xyz/gpx/SouthMtn.gpx";
    } else if (parseInt(form.gpxsample.value) === 1) {

        upload_url = "https://gpxtruder.xyz/gpx/VXX.gpx";
    } else {
        return;
    }
}
window.alert(upload_url);
window.alert(options);
loader(options, upload_url);

if (radioValue(form.gpxsource) === 0) {
    window.URL.revokeObjectURL(upload_url);
}

第二部分代码

var loader = function(options, gpx_url) {
window.alert(gpx_url);
Messages.clear();

var req = new XMLHttpRequest();
req.onreadystatechange = function() {
    if (req.readyState === 4 /*&& req.status == 200*/) {

        if (!req.responseXML) {
            Messages.error("This doesn't appear to be a GPX file.");
            return;
        }
window.alert(req.responseXML);
        // Attempt to parse response XML as a GPX file.
        var pts = Parser.file(req.responseXML, options.zoverride, options.zconstant);
        if (pts === null) {
            return;
        }

        // If all is well, proceed to extrude the GPX path.
        g = new Gpex(options, pts);
    }
};

// submit asynchronous request for the GPX file
req.open('GET', gpx_url, true);
req.overrideMimeType("text/xml");
req.send();

};

如果我更改 url 地址并插入托管 gpx 文件的服务器 web 空间，我的问题与upload_url = "https://gpxtruder.xyz/gpx/VXX.gpx"; 紧密相关，即使我使用原始文件，页面回答“这似乎不是 GPX 文件。”

我没有发现问题可能是。

可能是 javascript 相关的问题？（但代码和文件完全是原始文件的复制品）或者可能是托管 gpx 文件的服务器端配置问题？

可以找到原始文件

https://gpxtruder.xyz/index.html

https://gpxtruder.xyz/js/gpxtruder.js

感谢您的帮助，如果可能的话。

【问题讨论】：

if (req.readyState === 4 /*&& req.status == 200*/) { — 注释掉状态检查是一个令人担忧的迹象。状态如何？如果不是200 OK，那么这就是问题所在的一个很好的线索。
"这似乎不是 GPX 文件" — 那它是什么？做一些调试。查看浏览器开发人员工具中的网络选项卡。响应正文是否包含您期望的数据？那个 Content-Type 标头正确吗？

标签： javascript html server xmlhttprequest xt

【解决方案1】：

问题是服务器端配置，确切地说是：缺少 CORS 标头“Access-Control-Allow-Origin”

我是一个新手，不知道浏览器控制台是如何工作的以及有什么用处

通过 .htaccess 解决

   <IfModule mod_headers.c>
     Header set Access-Control-Allow-Origin "*"
   </IfModule>

找到答案 CORS header 'Access-Control-Allow-Origin' missing

【讨论】：