APIの読み込み時に、401エラーが発生する

前提・実現したいこと

xfreeサーバー上にindex.htmlをアップし、scriptで天気API（Simple Weather API）を読み込みたい。

ここに質問の内容を詳しく書いてください。
APIの読み込み練習のために、天気APIを読み込もうと思っています。
試しに実行してみると、401エラーが発生しており、エラーコードにしたがってサイトを見てみましたが、APIキーに関する記述のようでした。
APIキーはサイトからコピペで使用しているため、間違えるはずがなく、見直しても間違えているようには見えませんでした。
また、APIキーの発行から24時間以上は経過している認識です。

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

{"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."}

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button onclick="test()">test</button>
    <script>
        function test() {
            let baseUrl = "https://api.openweathermap.org/data/2.5/weather";
            let treURL = "?lat={経度}&lon={緯度}"
            let apiKey =  "&appid={"+"APIキーを挿入しています。"+"}";

            let getApi = baseUrl+treURL+apiKey;
            console.log(getApi);
            
            // XMLHttpRequestオブジェクトの作成
            var request = new XMLHttpRequest();

            // URLを開く
            request.open('GET', getApi, true);

            // レスポンスが返ってきた時の処理を記述 
            request.onload = function () {
            // レスポンスが返ってきた時の処理
            var data = this.response;
            console.log(data);
            }

            // リクエストをURLに送信
            request.send();

        }
    </script>
</body>
</html>