leafletを利用したマップにマーカーが表示されない

実現したいこと

leafletを利用して福島県のマップを表示し、hometown_tour.txtファイルに書いてある4つの場所のマーカーを表示したい

前提

マップは表示されるのですが、マーカーが表示されません。

発生している問題・エラーメッセージ

google chromの開発者ツール→コンソールでエラー文を見たところ、
「×Access to XMLHttpRequest at 'file:///C:/xampp/htdocs/webeng/report/hometown_tour.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.hometown_tour1.js:34
×GET file:///C:/xampp/htdocs/webeng/report/hometown_tour.txt net::ERR_FAILED」
と出力されました。
CORSについて調べたのですが解決方法が分かりません。

該当のソースコード

・hometown_tour.html

<!DOCTYPE html>
<html>
    <head>
        <title>地元観光案内</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
        <script src="hometown_tour1.js" type="text/javascript"></script>

    </head>

    <body onload="init()">
        <div id="map" style="width: 800px; height: 600px"></div>
        <span id="link"></span>
        <span id="reset"></span><br/>
        <span id="tour"></span><br/>
    </body>
</html>

・hometown_tour.txt

{"sightseeing":[
    {"name":"いわき駅","lat":37.058174,"lng":140.8920926,"url":"https://www.jreast.co.jp/estation/station/info.aspx?StationCd=166"},
    {"name":"湯本駅","lat":37.0069806,"lng":140.8497845,"url":"https://www.jreast.co.jp/estation/station/info.aspx?StationCd=1626#_gl=1*ca9rnp*_ga*MzE5MjUwNjUwLjE2ODYyMzI1NjI.*_ga_ZDNCJLPMZL*MTY4NjIzMjU2MS4xLjAuMTY4NjIzMjU2MS4wLjAuMA..&_ga=2.240639491.1076754730.1686232562-319250650.1686232562"},
    {"name":"スパリゾートハワイアンズ","lat":36.9935302,"lng":140.8156638,"url":"https://www.hawaiians.co.jp/"},
    {"name":"ラトブ","lat":37.0568653,"lng":140.8918332,"url":"https://www.latov.com/"}
]}

・hometown_tour1.js

var map,sightseeingData;

/*****ロード時に読み込まれる初期化関数 *****/
function init(){
    map=L.map("map");
    map.setView([37,140.8],10);
//defaultMapTile
    var gsi=L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
        {attribution:"<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"});
//paleMapTile
    var gsipale=L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
    {attribution:"<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>"}); 
//openStreetMapTile
    var osm=L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
    {attribution:"<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a>contributors"}); 

    var baseMaps={
    "地理院の標準地図":gsi,
    "地理院の淡色地図":gsipale,
    "オープンストリームマップ":osm
    };

    L.control.layers(baseMaps).addTo(map);
    L.control.scale({maxWidth:200,position:'bottomright',imperial:false}).addTo(map);
    gsi.addTo(map);

    var obj=new XMLHttpRequest();
    
    obj.onreadystatechange=function(){ 
        if(obj.readyState==4 && obj.status==200) ReadJson(obj.responseText);
    };
    obj.open("get","hometown_tour.txt");
    obj.setRequestHeader("If-Modified-Since","01 Jan 2000 00:00:00 GMT");
    obj.send(null);
}

/****hometown_tour.txtを読み込んでマーカーを表示する関数****/
    function ReadJson(text){
        sightseeingData=eval("("+text+")");
        for(var i=0;i<sightseeingData.sightseeing.length;i++){
            var point=[sightseeingData.sightseeing[i].lat,sightseeingData.sightseeing[i].lng];
            var marker=new L.marker(point);
            marker.addTo(map);
        }
    }

行動規範の内容に同意します

回答1件

ベストアンサー

　結論から言うと、サーバを立ててください。以下、説明です。

　エラーメッセージの "Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted."を訳すると、こんなような意味です。

クロスオリジンリクエストは以下のプロトコルスキームのみをサポートしています： http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted

　エラー部分のリクエストは、file:///C:/xampp/htdocs/webeng/report/hometown_tour.txt のようですから、fileプロトコルです。これはエラーメッセージに書かれているスキームに含まれていませんので、エラーになっています。

ソースを見ると、

js
1obj.open("get","hometown_tour.txt");

　と相対パスになっています。

　相対パスでプロトコルスキームが省略されている場合、呼び出しているページのプロトコルと同一とみなされます。つまり、hometown_tour.html がfileプロトコルになっているのが直接の原因です。おそらく、HTMLファイルをダブルクリックするなどして起動しているのだと思います。これをhttpプロトコルなどにするためには、URLを絶対パスで書く必要があります。そのためにはドメイン名などを省略せずに記述する必要があります。そのためには、サーバが必要です。

　ローカルサーバを立てる方法は「ローカルサーバ　立て方」などでググるといいと思います。おそらく、VSCodeの機能拡張などを使うのがお手軽だと思います。

投稿2023/06/10 00:40