Как решить проблему с fetch?

Question

[atumbochka]

Суть программы заключается в том, что пользователь загружает свой файл, после чего ему выдается ссылка для его скачивания, вот код, который за это отвечает:

fileControl.addEventListener('change', async function(event){
    const target = event.target;

    const uploadFile = target.files[0];
    console.log(uploadFile);

    const formData = new FormData()
    formData.append('upload', uploadFile)

    const response = await fetch('upload', {
        method: 'POST',
        body: formData
    })

    const data = await response.json();
    console.log(data);

    const link = document.createElement('a');

    link.href = '/file/' + data.id;
    link.textContent = uploadFile.name

    content.appendChild(link);

});

После загрузки файла ссылка не появляется, а консоль выдает следующее: Fetch API cannot load file:///C:/Users/123/Desktop/express%20test/expres.... URL scheme must be "http" or "https" for CORS request.

И, честно говоря, я не понимаю, проблема в CORS или в пути к файлу. Я поставил
res.setHeader("Access-Control-Allow-Origin", "*")
в файле сервера, но ничего не изменилось, видимо, что-то не так с путями.

Comments

[Lynn «Кофеман»]

Эм, вы html-файл с диска открыли что ли?
Вам надо запустить сервер и в браузере открывать его адрес (обычно что-то типа localhost:3000)

Answer 1

[MikUrrey]

У вас обращение к серверу прописано как
await fetch('upload', ...)
Это значит, что он будет в URL страницы подставлять `upload` и пытаться грузить файл туда.
А это, в свою очередь, значит, что страница, открытая кликом из проводника, передаст функции fetch невалидный URL.
Чтобы всё работало, страницу нужно разместить на том же домене, где работает сервер, и открывать, набирая адрес в браузере, чтобы в адресной строке URL начинался не с file://, а с http://