Browser “Not allowed to load local (temporary) resource”

I am developing an app in ASP.net Core MVC and am using Javascript for the connection between SignalR and the front-end. I want to take the sentence in a textbox, send that sentence to the back-end which will transform that sentence into TTs in the form of a temporary file and then attach that file to an <audio> element.

<script>
const connection = new signalR.HubConnectionBuilder().withUrl("/SandboxHub").build();

connection.start().catch(err => console.error(err));

$("#sentence-input").on("input", async function () {
    const sentence = $(this).val();

    await connection.invoke("TransformIntoTTS", sentence);

    connection.on("ReceiveFile", function (fileUrl) {
        
        $("#audio-player").attr("src", fileUrl);
        
        const audioPlayer = document.getElementById("audio-player");
        audioPlayer.load();
    });
});

My sandbox hub:

    public class SandboxHub : Hub
{
    public async Task TransformIntoTTS(string sentence)
    {
        string filePath = await TTSConverter.SaveTTSAsTemporaryFileUSAsync(sentence);

        await Clients.Caller.SendAsync("ReceiveFile", filePath);
    }
}

Important logic:

var tempFile = Path.GetTempFileName();
                    using (var fileStream = new FileStream(tempFile, FileMode.Create, FileAccess.Write))
                    {
                        await fileStream.WriteAsync(result.AudioData);
                    }

            
                    return Path.GetFileName(tempFile);

What should I do?