代理运行节点反应应用程序

Question

我刚刚创建了一个react-node-SQL应用，并且希望它在Google Cloud（不是firebase）上运行

我的React应用程序在不同的端口上运行，而我的节点应用程序在不同的端口上运行。

我遵循了这个article并在我的react-app package.json中添加了这一行，但是我没有解决，即按钮中的href仍将转到localhost：8081，但是没有工作

我的节点在端口8080上运行，在我的应用程序的package.json中，我添加了"proxy": "http://localhost:8080/"；在按钮中，当我执行href="/api/status"时，它将添加到localhost:8081 React应用正在运行

现在，是否可以在同一项目下运行两个节点并做出反应？或者我们需要为他们创建一个单独的项目。

[更新：] 我正在使用webpack，在我的webpack配置文件中，添加了

devServer: {
    proxy: {
      '/': 'http://localhost:8080'
    }
  },

与此相关的问题是，即使在我的应用中，启动（在8081上运行）在打开网页localhost：8081 /时也会引发错误，提示无法获取页面

但是如果我做这样的事情

  devServer: {
        proxy: {
          '/api': 'http://localhost:8080'
        }
      },

正常打开页面主页。现在我的api和身份验证后的回调uRL未配置为带有api前缀。

Answer 1

基本上，当您从React应用发出ajax请求时，例如axios或fetch，它将使用proxy: <..>作为后端URL。但是，href不适用于代理。在这种情况下，您需要使用手动代理页面中记录的setupProxy.js手动配置代理。

查看此issue：

  

这里有同样的错误，它仍然路由到localhost：3000 / api / auth / google，我的   CRA版本是2.1.3，看来http-proxy-middleware是唯一的   工作方式。我必须手动配置代理

从react doc：

  

如果代理选项对您来说不够灵活，您可以直接获得   访问Express应用程序实例并连接您自己的代理   中间件。

     

您可以结合使用此功能和代理属性   package.json，但建议您整合所有逻辑   进入src / setupProxy.js。