如何使用 express .sendFile 发送 React.js 文件？答案

【问题标题】：How to send React.js files with express .senfFile?如何使用 express .sendFile 发送 React.js 文件？
【发布时间】：2018-08-26 20:07:14
【问题描述】：

我正在使用 create-react-app。

当您访问 localhost:3001/test - 它确实提供 HTML。但是你看到的只是一个空页面，因为 id "root" 中的任何内容都没有被渲染。

这是我服务器中的代码：

app.get('/test', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
})

而我的 HTML 与此接近：

<body>
    <div id="root"></div>
</body>

【问题讨论】：

标签： html reactjs express

【解决方案1】：

根据提供的一些细节，我将给出一个清单

1- 确保您的这部分代码中有 root

ReactDOM.render(<YourApp />, document.getElementById('root'));

2- 在您的控制台中，您是否有任何类似的错误消息？

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

...那么由于 CORS 问题，您只是没有从服务器接收数据。使用这个：CORS

3- 仔细检查执行 res.sendFile 的服务器是否正常运行，检查终端以检查“找不到文件”等错误或类似问题。

4- 这可行（我刚刚尝试过），在与当前服务器相同的目录中尝试。将代码粘贴到 testNode.js 并运行 node testNode.js 然后访问 http://localhost:3003/test

const express = require('express')
const app = express()
const port = 3003

app.get('/test', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
})

app.get('/', (request, response) => {
  response.send('Hello from Express!')
})

app.listen(port, (err) => {
  if (err) {
    return console.log('something bad happened', err)
  }

  console.log(`server is listening on ${port}`)
})

5- public/ 文件夹是否可读？它有正确的权限吗？试试chmod -R 777 public/（稍后改回来）

【讨论】：

当你测试这个时，你只得到了 HTML 吗？还是你有 React 渲染到根 div，并让 React.js 也渲染？因为谢谢你的回答。我正是这样做的，但我没有让 React 渲染。我只得到HTML。太好了，但是没有一个 React 出现:(。我知道我没有 CORS 问题，控制台显示没有错误，我有 ReactDOM.render。公用文件夹似乎是可读的。因为我放了一个index.html 中的
标签。我看到的是 h1 标签渲染，但不是 React。
这只是没有反应的节点。它可以让你先尝试你的服务器代码。然后，当您确定服务器返回您需要的内容时，您可以继续调试客户端（反应）。我需要看看你的反应组件来帮助你......
您的问题可能只与 document.getElementByID 相关

【解决方案2】：

您必须设置静态文件的位置。例如，如果您使用环境变量。

if(process.env.ENV === 'prod'){
    app.use(express.static('client/build'));
    const path = require('path');

    app.get('/test', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
    })
}

另外，请确保运行 npm run build 以创建部署所需的所有文件。

【讨论】：

标签。我看到的是 h1 标签渲染，但不是 React。