[英]problems with XMLHttpRequest or is a server setting problem loading a gpx file
我是意大利人,幾乎是 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();
};
我的問題與upload_url = "https://gpxtruder.xyz/gpx/VXX.gpx";
如果我更改 url 地址並插入我的服務器 web 空間,我在其中托管 gpx 文件,即使我使用原始文件,頁面也會回答“這似乎不是 GPX 文件。”
我沒有發現問題可能是。
可能是與 javascript 相關的問題嗎? (但代碼和文件完全是原始文件的復制品)或者可能是托管 gpx 文件的服務器端配置問題?
可以找到原始文件
https://gpxtruder.xyz/index.html
https://gpxtruder.xyz/js/gpxtruder.js
感謝您的幫助,如果可能的話。
問題是服務器端配置,確切地說是: CORS header 'Access-Control-Allow-Origin' 缺失
我是新手,不知道瀏覽器控制台如何工作以及如何有用
通過 .htaccess 解決
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.