如何使用 MERN 提供静态 html 文件

Posted 2023-03-16

【中文标题】如何使用 MERN 提供静态 html 文件

【英文标题】：how to servre static html file using MERN

【发布时间】：2021-10-29 04:00:18

【问题描述】：

我在前端使用 React，在后端使用 Express。我想提供一个位于我的服务器文件夹中的静态 html 页面。在前端单击按钮时，后端的不同 api 工作。当上一个 api 调用成功时，我使用 res.redirect 运行下一个 api..

下面是代码示例..

app.js

 app.post('/api/forge/datamanagement/bucket/upload/uploads/:filename', function (req, res) 
  console.log(req.params.filename);
  console.log("Token",access_token)
  var fs = require('fs'); // Node.js File system for reading files
  fs.readFile(`./uploads/$req.params.filename`, function (err, filecontent) 
    console.log(filecontent)
      Axios(
           method: 'PUT',
           maxContentLength: Infinity,
           maxBodyLength: Infinity,
           url: 'https://developer.api.autodesk.com/oss/v2/buckets/' + 
           encodeURIComponent(bucketKey) + '/objects/' + 
           encodeURIComponent(req.params.filename),
           headers: 
                 Authorization: 'Bearer ' + access_token,
                 'Content-Disposition': req.params.filename,
                 'Content-Length': filecontent.length
                ,
            data: filecontent
                 ).then(function (response) 
                      // Success
                       console.log(response);
                       console.log("IdUrn ====>>>>>>>"+ response.data.objectId)
                       var urn = response.data.objectId.toBase64();
                       console.log("In Response")
                       res.redirect('/api/forge/modelderivative/' + urn);
                     ).catch(function (error) 
                          // Failed
                            console.log(error.message);
     
                            res.send(error.messa);
                             );
                           ););

因此，当用户单击前端上的按钮时，将调用 /api/forge/datamanagement/bucket/upload/uploads/:filename 的上述路由。此路由然后将控件重定向到此路由..

   /api/forge/modelderivative/' + urn

上述路线的完整代码如下。

      app.get('/api/forge/modelderivative/:urn', function (req, res) 
        console.log("urrrrn=>>>>>",req.params.urn)
        var urn = req.params.urn;
        var format_type = 'svf';
        var format_views = ['2d', '3d'];
            Axios(
                  method: 'POST',
                  url: 'https://developer.api.autodesk.com/modelderivative/v2/designdata/job',
                  headers: 
                            'content-type': 'application/json',
                             Authorization: 'Bearer ' + access_token
                            ,
                     data: JSON.stringify(
                           'input': 
                            'urn': urn
                              ,
                            'output': 
                                  'formats': [
                                         
                                           'type': format_type,
                                            'views': format_views
                                           
                                             ]
                                         
                                      )
                                ).then(function (response) 
                                  // Success
                                 console.log("Translated=============>>>",response);
                                 res.redirect('http://localhost:8080/viewer.html?urn=' + urn);
                                 ).catch(function (error) 
                                          // Failed
                                      console.log(error);
                                      res.send("Error at model derivate job");
                                      ););

上面的路由重定向到 viewer.html 文件是我服务器文件夹中的一个文件。我也想将 urn 发送到 html 文件。当用户使用此代码时，错误发生 404 。找不到.... app.js 和 viewer.html 的父级是服务器文件夹。我怎样才能实现这一点来提供 html 文件以及将 Urn 变量传递给 html 文件。我已经坚持了一段时间..

【参考方案1】：

我不确定我是否理解为什么 viewer.html 不是通过端口 3000 提供的 前端 的一部分，而不是将其作为在端口 @987654324 上运行的其他功能的一部分@。无论哪种方式，它都有一个服务器部分。

正如AutoDesk forge viewer Api integration issue 线程的cmets 中所指出的，您必须以某种方式提供像viewer.html 这样的文件内容。你使用的是app.use(express.static('public')); 还是类似的东西？

http://localhost:8080/viewer.html 请求必须在某处处理并为客户端提供 html 文件。

【讨论】：

感谢您的评论。问题已解决，是的，我正在将编码的骨灰盒发送给 viewer.html