Question

我对节点/反应有点新意。

我有一个API /快速节点应用程序，在那个应用程序中我有一个反应应用程序。 react应用程序具有axios.get命令和其他API调用。 react应用程序找到我执行的API调用，并将它们转发到我在react应用程序的package.json中设置的代理。在开发代理中，代理看起来像这样：“代理”：“http://localhost:3003/”但是现在我正在投入生产，我正在尝试将此代理更改为我正在托管我的节点快速应用程序的URL代理“：”http://168.235.83.194:83/“

当我将项目移至生产时，我将端口83作为API节点应用程序，并将端口84作为反应应用程序（使用nginx）。无论出于何种原因，我的反应应用程序只是不知道如何对节点应用程序执行API请求..我得到空白数据

谷歌搜索后我才意识到，'代理'设置仅适用于对开发服务器的请求。通常在生产中，您有一个服务器，它提供初始页面html并且还提供api请求。所以对/ api / foo的请求自然会起作用;您无需指定主机。

这是我想弄清楚的部分。如果有人可以告诉我如何设置我的应用程序，以便/ api / foo自然起作用，我将非常感激。

我试图正确地设置它。这可能是一个完全失败的方法，但它已经很晚了，我会在这个问题上睡着了。我应该有nginx句柄在一个语句文件中同时提供静态html和请求？到目前为止我有这个，但我可以离开这里...

server {
  listen 84;
  server_name 168.235.83.194;


  root /home/el8le/workspace/notes/client/build;

  index index.html index.htm;
  location / {
  }

  location /api{
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://168.235.83.194:83/; //I have nginx hosting my API app on this port. Not even sure if this should be like this?
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }

}`

另外，如果你想更好地了解我的位置，我实际上是托管这些IP地址： http://168.235.83.194:84

http://168.235.83.194:83/customers

Answer 1

您必须在提出数据请求时提供实际的API URL。开发服务器能够代理到不同的API URL。因此，如果应用程序使用DEV Server加载http://localhost:83，则任何数据请求（如/ api / customers）将转至http://localhost:83/api/customers，dev代理服务器将其传递给http://localhost:84/api/customers。

但在生产中，当您提出相同的请求时，它会使用您应用的基地址并尝试从http://PRODUCTION_SERVER:83/api/customers获取数据。

处理此问题的正确方法是使用绝对URL而不是相对URL。并且由于生产和开发将具有不同的基本URL，请将它们保存在配置变量中，然后将特定的api地址附加到此基址，例如：${BASE_URL}/api/customers，其中BASE_URL在DEV中为http://localhost:84且{ {3}}

如何让我的React应用程序指向生产中的Node / Express API。代理仅适用于开发人员。

1 个答案: