Question

我有一个React应用程序在本地成功运行，并且所有api请求均已从单独的服务器成功运行。运行构建时，到api服务器的路径会丢失，并且不会加载任何数据。以下是一些屏幕截图...

从api成功加载数据。

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

这是我的node / express服务器/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文件具有快速代理的URL（在后台运行）。

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

我的问题是，为什么不将api加载到生产/ build中？我刚得到这个...

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

但是当只在本地运行时（从npm开始），我得到了这个信息并从api加载了数据。

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

任何帮助表示赞赏，让我发疯！谢谢。

Answer 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'));
});

Answer 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

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

Answer 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调用，请使用regex排除进行API调用的模式。

React＆Express服务器未在生产/构建中获取api请求

3 个答案: