YahooAPIの結果をJavaScriptから取得したいが、CORSによってブロックされてしまう

Question

前提・実現したいこと

現在地を取得して、最寄りのマクドナルドやガストなどを検索するアプリケーションを作成しています。
「Yahoo!ローカルサーチAPI」を利用して、その検索結果をJavaScriptから利用しようと思ったのですが、作成したWebアプリケーションを実行してコンソールを開くと、

Access to fetch at 'https://map.yahooapis.jp/search/local/V1/localSearch?appid=(アプリケーションID)&query=(検索キーワード(URLエンコード済み))&dist=3&sort=geo&lon=(経度)&lat=(緯度)&output=json' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

というようなメッセージが表示されました。
恐らくCORS関連のエラーだとは思うのですが、解決方法が分かりません。
このエラーを解決し、JavaScriptから検索結果を利用できるようにしたいのですが、どうすればよろしいでしょうか？

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

• 現在地を取得して、最寄りのマクドナルドやガストなどを検索するアプリケーションを開発中である。

「Yahoo!ローカルサーチAPI」を利用して、その検索結果をJavaScriptから利用しようと思ったのですが、作成したWebアプリケーションを実行してコンソールを開くと、

Access to fetch at 'https://map.yahooapis.jp/search/local/V1/localSearch?appid=(アプリケーションID)&query=(検索キーワード(URLエンコード済み))&dist=3&sort=geo&lon=(経度)&lat=(緯度)&output=json' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

というようなメッセージが表示される。恐らくはCORS関連のエラーだとは思うが、解決方法が分からない。

• このエラーを解決し、JavaScriptから検索結果を利用できるようにしたい。

該当のソースコード

const app = new Vue({
    el: "#app",
    data:{
        lon: NaN,
        lat: NaN,
        target: "",
    },
    methods:{
        getLocation: function(){
            //検索対象が入力されていない場合は検索をしない
            if(this.target===""){
                return;
            }
            navigator.geolocation.getCurrentPosition(this.getLocationImpl);
        },
        getLocationImpl: function(position){
            this.lon = position.coords.longitude;
            this.lat = position.coords.latitude;
            createMap();
        }
    },

});

function GETYahooRequest(keyword, lon, lat){
   const RequestURL = "https://map.yahooapis.jp/search/local/V1/localSearch?appid=(アプリケーションID)&query="
                      +keyword+"&dist=3&sort=geo&lon="+String(lon)+"&lat="+String(lat)+"&output=json";
    fetch(RequestURL,{
        method: "GET",
        mode: 'cors',
        headers: {
            "Access-Control-Allow-Origin": "",
            "Access-Control-Allow-Methods": "GET",
            "Access-Control-Allow-Headers": "*"
        }
    })
    .then((response) => {
        if(response.ok){
            return response.json().then(resJson =>{
                console.log(JSON.stringify(resJson));
            });
        }else{
            throw new Error("リクエストが取得できませんでした。");
        }
        
    }).then(resJson =>{
        return resJson;
    });
}

//地図を生成
function createMap() {
    //以下のコードは次のWebサイトを参考にしている:http://www.nowhere.co.jp/blog/archives/20180705-160052.html
    const map = L.map('map');
    // タイルレイヤーを作成し、地図にセットする
    L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
       maxZoom: 18,
       attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
    }).addTo(map);

   // 地図の中心座標とズームレベルを設定する
   map.setView([app.lat, app.lon], 13);
   //目的地用のアイコンを生成
   const targetMarker = L.AwesomeMarkers.icon({
     markerColor: 'orange'
    });
   //現在地にマーカーを付ける(そのままだと見づらいので)
   const currentLocation = L.marker([app.lat, app.lon]).addTo(map);
   currentLocation.bindPopup("現在地");
   
   const targetLon = NaN;
   const targetLat = NaN;
   //YahooAPIで条件に合う店舗を検索し、緯度経度を取得する
   //検索対象をURLエンコードする
   const KeyWord = encodeURIComponent(app.target);
   const JsonResult = GETYahooRequest(KeyWord, app.lon, app.lat);
   //TODO: ルートを表示する(無理ならしなくてOK)
   //検索結果の場所にマーカーを立てる
   const targetLocation = L.marker([targetLat, targetLon], {icon:targetMarker}).addTo(map);
   targetLocation.bindPopup("最寄りの"+app.target);  
  
}

試したこと

以下のサイトを元に、CORSのことについて調べたのですが、解決方法は分かりませんでした。

• CORS とは？ - JavaScript の基本 - JavaScript 入門(URL:https://javascript.keicode.com/newjs/what-is-cors.php)

補足情報（FW/ツールのバージョンなど）

使用したライブラリ・プラグイン

• vue.js：バージョン2.6.14
• leaflet：バージョン1.3.1
• Leaflet.awesome-markers plugin：バージョン2.0
• 開発に使用しているブラウザ：Chrome(バージョン：91.0.4472.114)
• 開発に使用しているエディタ：VS Code

Comments

[yuki84web]

アクセストークン取得してますか？

[BraveDragon]

アクセストークンにつきましては、Yahoo IDを取得した上で、正規の手順でアプリケーションを登録してアアプリケーションIDを取得しています。

Answer 1

以下のドキュメントのJSONPによる呼び出しを使えば良いと思います。具体的には、callbackパラメータにcallback関数名を指定します。

YOLP(地図):Yahoo!ローカルサーチAPI - Yahoo!デベロッパーネットワーク

素のJavaScriptでは面倒ですが、単に試すだけであれば、以下のようにすればよいでしょう。実用にするには適当なJavaScriptライブラリ（jQueryでも可）を検討してください。

<script>
funcation callbackFunc(res) {  // callback関数
  // resにAPIからの返り値がオブジェクトとして入っている
}
</script>
<script src="https://map.yahooapis.jp/search/local/V1/localSearch?appid=XXXX&callback=callbackFunc&..."></script>

Comments

[BraveDragon]

ご回答誠にありがとうございます。頑張ってやってみます。

[BraveDragon]

回答にあるソースコードに従ってやってみた結果、エラーが無事解決しました。
誠にありがとうございました。