Cross origin requests are only supported for protocol schemes: (…) when accessing local file

I’m building a Text-To-Speech Website using Google API.

Server-Side works fine, now I started building frontend where I currently have a input field for the message that should be converted into mp3, as well as a button.

This is my frontend:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <input type="text" id="textInput">
    <button id="convertButton" onclick="convertTTS()">Konvertieren</button>

    <script>
        function convertTTS() {
            // Creating Our XMLHttpRequest object 
            var url = 'localhost:5500/convertTextToMp3';
            var xhttp = new XMLHttpRequest();

            // Making our connection  
            xhttp.open("GET", url, true);

            // function execute after request ist successful
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    console.log("Es funktioniert");
                }
            };

            // Sending our request
            xhttp.send();
        }
    </script>
</body>
</html>

and this is my server:

const textToSpeech = require("@google-cloud/text-to-speech")

// dot env
require("dotenv").config()
const fs = require("fs")
const util = require("util")
const client = new textToSpeech.TextToSpeechClient()
const express = require('express');
const app = express();
const cors = require('cors')


async function convertTextToMp3(){
    console.log("Yippie! It works!");

    const text = "Example Text"

    const request = {
        input: {text:text}, 
        voice: {languageCode:"en-US", ssmlGender:"Neutral"},
        audioConfig:{audioEncoding:"MP3"}
    }

    const [response] = await client.synthesizeSpeech(request)

    const writeFile = util.promisify(fs.writeFile)

    await writeFile("output.mp3", response.audioContent, "binary")

    console.log("Text to Speech has completed. Audio File has been saved.")
}

app.use(cors());

app.get('/convertTextToMp3', (req, res) => {
    //convertTextToMp3();
    res.send('Function called successfully!');
});

app.listen(5500, () => console.log('Server started on port 5500'));

The server is running using nodejs and I’m using express for the endpoint.

I start the frontend using the LiveServer extension from VSCode.

I also added Cors (installed using npm).

What I tried is different uses of cors like:

app.use(corse());

or

app.use(cors({
    origin: '*'
    , methods: ['GET','POST','DELETE','UPDATE','PUT','PATCH']
}));

I also tried to include it into app.get directly:

app.get('/convertTextToMp3', cors(), (req, res) => {
    //convertTextToMp3();
    res.send('Function called successfully!');
});

I also tried to call http://127.0.0.1 instead of localhost here:

var url = 'localhost:5500/convertTextToMp3';

but then I get a 404 issue from “http://127.0.0.1:5500/convertTextToMp3”:
enter image description here

What I expect to happen is, that I get a “Yippie! It works!” output on the console.

The actual result is this error:

enter image description here

Why my question is different: So far I’ve seen multiple different questions to this topic, but mostly users are using something like file:/ which I don’t use.

Other questions I found are using specific frameworks which I don’t use.