@atumbochka

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

Суть программы заключается в том, что пользователь загружает свой файл, после чего ему выдается ссылка для его скачивания, вот код, который за это отвечает:
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", "*")
в файле сервера, но ничего не изменилось, видимо, что-то не так с путями.
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ответы на вопрос 1
@MikUrrey
У вас обращение к серверу прописано как
await fetch('upload', ...)
Это значит, что он будет в URL страницы подставлять `upload` и пытаться грузить файл туда.
А это, в свою очередь, значит, что страница, открытая кликом из проводника, передаст функции fetch невалидный URL.
Чтобы всё работало, страницу нужно разместить на том же домене, где работает сервер, и открывать, набирая адрес в браузере, чтобы в адресной строке URL начинался не с file://, а с http://
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы