ReactJS скачать файл с Express Server

Question

Я пытаюсь сделать так, чтобы мой пользователь мог загрузить файл с нашего внутреннего сервера. Я пробовал решение из этого вопроса , а также бэкэнда из this .

К сожалению, никто из них не работал. Сама загрузка работает через почтальона, но не в реакции.

Дополнительная информация: серверная часть работает на той же машине, но на порту 3001, а интерфейс работает на порту 3000 Я не уверен, помогает ли это, но веб-интерфейс реакции подключен к бэкенду через прокси в пакете. Json

"proxy": "http://localhost:3001",

Клиентская сторона в настоящее время выглядит так:

    const download = require("downloadjs");

    const handleDownload = async () => {
      const res = await fetch("http://localhost:3001/download");
      const blob = await res.blob();
      download(blob, "test.pdf");
    }


    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <button onClick={() => handleDownload().finally(() =>                 console.log("Passed through the whole handleDownload Request"))}>                </button>
          </header>
        </div>
      );
    }

в то время как на стороне сервера я использую этот код, как и из предыдущих вопросов, задаваемых здесь по stackoverflow.

    app.get('/getdoc', function (req, res) {
        res.download(path.join(__dirname, 'files/test.pdf'), function (err) {
            console.log(err);
        });
    });

Это код, работающий через Postman, но он не запускает загрузку в React.

Ошибка, возникающая в реакции, выглядит следующим образом:

    App.js:8 GET http://localhost:3001/download/test.pdf    net::ERR_CONNECTION_REFUSED

    Uncaught (in promise) TypeError: Failed to fetch

Таким образом, кажется, что обработка внешнего интерфейса, похоже, является проблемой, так как она не вызывает диалог сохранения из браузера (Chrome).

Answer 1

Попробуйте это:

const handleDownload = () => {
var reqObj = new XMLHttpRequest();
reqObj.open('GET','http://localhost:3001/download',true);     // 'getpdf' is the URI to recongize your request at the server
reqObj.send();

reqObj.onreadystatechange = function() {
    var resObj = this;
    if(resObj.readyState == resObj.DONE) {
        if (resObj.status != 200) {
            console.log(200);
        } else if (resObj.status == 200){
            var resTxt = reqObj.responseText;
            window.location.assign(resTxt);    // Opens the pdf download prompt
        }
    }
}