three.js导入音频报跨域问题

three.js 中的非位置音频导入外部或者本地音频的时候会报跨域问题是怎么一回事
以下是部分代码

        <ul>
            <li class="title">请选择音乐</li>
            <li>
                <button class="btn" id="btnA" type="button">
                    Snowflakes Falling Down by Simon Panrucker
                </button>
            </li>
            <li><button class="btn" id="btnB" type="button">This Christmas by Dott</button></li>
            <li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banks</button></li>
            <li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smeby</button></li>
            <li class="separator">或者</li>
            <li>
                <input type="file" id="upload" hidden />
                <label for="upload">Upload File</label>
            </li>
        </ul>

        const buttons = document.querySelectorAll(".btn");
        buttons.forEach((button, index) =>
            button.addEventListener("click", () => loadAudio(index)));

       function loadAudio(i) {
            const fftSize = 2048;
            const listener = new THREE.AudioListener();
            const audio = new THREE.Audio(listener);
            document.getElementById("overlay").innerHTML =
                '<div class="text-loading">正在加载音乐,请稍等...</div>';
            const files = [
                "http://music.163.com/song/media/outer/url?id=38018486.mp3",
                "http://music.163.com/song/media/outer/url?id=38018486.mp3",
                "http://music.163.com/song/media/outer/url?id=38018486.mp3",
                "http://music.163.com/song/media/outer/url?id=38018486.mp3"];
 
            const file = files[i];
 
            const loader = new THREE.AudioLoader();
            loader.load(file, function (buffer) {
                audio.setBuffer(buffer);
                audio.play();
                analyser = new THREE.AudioAnalyser(audio, fftSize);
                init();
            });
        }

img

  1. 可以把音频保存到前端,调用本地的http://前端路径/xxx.mp3,避免出现跨域问题。
  2. 保存到后端,调用http://后端路径/xxx.mp3,后端还要添加相应的跨域设置
  3. 使用nginx进行代理