Laravel-Express-React Communications

时间:2019-06-11 14:20:42

标签: reactjs laravel express axios laravel-excel

如果有3个服务器,我正在做一个实验:

  • 使用Laravel(Laravel-Excel后端)
  • 使用ExpressJS(带有axios)
  • 使用React JS(FrontEnd)

我的目标是使用laravel-excel库并将数据库表直接导出到excel文件并下载。

在laravel服务器中,我正在使用以下代码行:

Excel::download(new UsersExport, 'users.xlsx');

这行代码有效,但是我无法将导出的文件请求发送到react js服务器。

在ExpressJS中,我尝试过:

app.post('/GetExportExcel', function (req, res) {

    axios.request({
        method: 'POST',
        url: 'http://localhost:8000/ExportandDownloadFile',
        headers: {
            "Access-Control-Allow-Origin" : "http://localhost:3000/",
            'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        },
        //responseType: 'stream'
        responseType: 'blob', // important
    })
    .then(response =>{

        response.data.pipe(res);
    })
    .catch(error => {
        if (error.response) {
            res.status(error.response.status).json(error.response.data);
        } else if (error.request) { 
            res.status(502).end();
        } else { 
            res.status(500).end();
        }
    });
});

并在React JS中:

static ExportExcelFile()
{
    const headers = new Headers();
    headers.append('Access-Control-Allow-Origin', '*');  

    return fetch('http://localhost:4500/GetExportExcel',{
        timeout: 2000,
        method: 'POST',
        mode: 'cors',
        headers,
    }).then(response => {

        response.blob().then(blob => {
            FileSaver.saveAs(blob, 'users.xlsx');
        });
    });
}

到目前为止,导出文件的内容尚未到达前端(reactJS服务器)。谁能帮我吗?

0 个答案:

没有答案