使用 Node 和 Proxy API 请求反应服务器答案

【问题标题】：React server with Node and Proxy API requests使用 Node 和 Proxy API 请求反应服务器
【发布时间】：2018-11-29 19:23:45
【问题描述】：

我对 React 比较陌生，并尝试将应用程序部署到 Openshift 环境。该应用程序包含一个 React JS 前端，它对 nodejs 后端 restful api 进行 API 调用。至少是这样的想法。

我发现的大多数方法都建议使用 docker，但我不知道从哪里开始。 create-react-app 文档提供了一个 Node/Express 服务器来呈现 index.html 的示例，我对此更加熟悉并且已经开始工作，但我似乎无法设置代理来将 api 调用路由到后端。

我最初尝试在 package.json 中设置代理，但没有成功。然后我发现 express-http-proxy 看起来很有希望，但无法让它发挥作用。

我的前端服务器如下所示：

const express = require('express');
const path = require('path');
const app = express();
const proxy = require('express-http-proxy');
const PORT = process.env.OPENSHIFT_NODEJS_PORT || 8080;
const API_PROXY_URL = process.env.APIURL

app.use(express.static(path.join(__dirname)));

app.use('/api', proxy(API_PROXY_URL));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(PORT, () => {
  console.log(`Server Started on port ${PORT}`);
  console.log(`Proxy in use of ${API_PROXY_URL}`);
});

我有一个通用 api 函数，它使用 axios 进行调用：

export function apiCall(method, path, data) {
  return new Promise((resolve, reject) => {
    return axios[method.toLowerCase()](path, data)
      .then(res => {
        return resolve(res.data);
      })
      .catch(err => {
        return reject(err.response.data.error);
      });
  });
}

例如，当我尝试登录时，它正在尝试对<<REACTURL>>/api/auth/signin 进行post 调用，而我希望它发送到<<APIURL>>/api/auth/signin。

我觉得我错过了一些非常明显的东西。

【问题讨论】：

如果您希望请求转到不同的域，那么您必须指定整个 URL。如果您只提供相对路径，请求将转到当前域，在您的情况下是反应服务器。
我可以不代理发送到 API 服务器的请求吗？
是的，您也可以这样做，但在这种情况下，需要设置代理服务器。 nginx 很容易配置为反向代理。
从我发现不清楚如何在不使用 Docker 的情况下配置 nginx 服务器 openshift？还是我错过了什么？
我从数字海洋找到了这个digitalocean.com/community/tutorials/… 指南，关于安装和配置`Nginx 很容易理解。如果这是您第一次这样做，我认为如果您不使用 Docker 可能会更容易。

标签： node.js reactjs proxy mern

【解决方案1】：

我无法让它工作，因为我想最终在 API 请求中声明完整的 URL 以使其工作。不漂亮，但可以：

export function apiCall(method, path, data) {
  let url = <<APIURL>> + path
  return new Promise((resolve, reject) => {
    return axios[method.toLowerCase()](url, data)
      .then(res => {
        return resolve(res.data);
      })
      .catch(err => {
        return reject(err.response.data.error);
      });
  });
}

【讨论】：