React & Express 服务器在生产 /build 中没有收到 api 请求答案

【问题标题】：React & Express server not getting api requests in production /buildReact & Express 服务器在生产 /build 中没有收到 api 请求
【发布时间】：2019-09-12 13:07:49
【问题描述】：

我有一个 React 应用程序在本地成功运行，并且所有 api 请求都从单独的服务器成功运行。当我运行构建时，api 服务器的路径丢失并且没有加载数据。下面是几张截图……

从 api 成功加载数据。

使用 localhost:80 指向 IIS 以响应 /build 文件夹。没有数据加载。

这是我的 node/express server/index.js 文件中的 api 调用示例

app.get('/api/company', (req, res) => {
api_helper.GET('https://****/api/company')
    .then(response => {
        res.json(response)
    })
    .catch(error => {
        res.send(error)
    })

})

我的 package.json 文件有 express 代理的 url（在后台运行）。

"proxy": "http://localhost:5000/",

我的问题是，为什么没有在生产/构建中加载 api？我只是得到这个......

请求网址：http://localhost/api/site 请求方法：GET 状态码：404 未找到远程地址：[::1]:80 推荐人政策：降级时无推荐人

但是当只是在本地运行（npm start）时，我会从 api 获得这个和数据加载。

请求网址：http://localhost:3000/api/site 请求方法：GET 状态码：304 未修改远程地址：127.0.0.1:3000 推荐人政策：降级时无推荐人

感谢任何帮助，让我发疯！谢谢。

【问题讨论】：

标签： node.js reactjs express deployment production

【解决方案1】：

经过多次测试我发现，你必须把路由放在前面

错误的例子：

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.use('/', routes);

正确的例子：

app.use('/api', routes);

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

【讨论】：

【解决方案2】：

对于其他为此苦苦挣扎的人，我想通了..

我必须将此添加到项目根文件夹中的 express server.js 文件中。

    app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });

然后我指向 express 运行的地址，在我的例子中是 http://localhost:5000

这行得通。

然后我还在 IIS 中设置了一个重写规则，将 localhost 和我们的域名指向 localhost:5000

现在一切正常，希望对其他人有所帮助。

【讨论】：

嗨，您能详细说明一下 IIS 中的重写规则吗？我的 api 请求有一个代理端口，该端口应该是我重写规则的端口吗？

【解决方案3】：

感谢您的信息。我对 ReactJS 很陌生，在创建生产版本时也遇到了类似的问题。实际上我已经添加了类似的东西，比如

app.use(express.static(<build_folder_dir>));

在那之前，我在我的 Express Server 中搜索并查看了您的帖子。无论如何，我没有添加类似您代码的第二行的内容，并且我的 API 调用是在单独的 js 文件中创建的路由器中编写的。

app.use('/api/some_path', <imported_router>);

在导出的路由器对象中，代码是这样写的：

router.get('/some_sub-path')

为了进行 API 调用，我在我的 react 应用中使用了 axios

axios.get(
      "/api/some_path"+"/sub-path?param_1="+<param_value>,
      {
        headers:{
          "Content-Type":"application/json",
          <some headers>
        }
      }
).then((res)=>{<Some codes using the res.data.<any param in body>>})

最后，我在 server.js 中添加了这些行

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, <path of the index.html in the build dir>), function(err) {
            if (err) {
              res.status(500).send(err)
            }
          })

  })

然而，我犯了一个愚蠢的错误，我的应用程序崩溃了，因为 app.get 覆盖了路由器中的设置。提醒一下，如果您在 GET 方法中启用任何 API 调用，请使用正则表达式来排除进行 API 调用的模式。

【讨论】：