代理运行 node-react 应用程序

Question

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

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

我按照这个article 并在我的react-app package.json 中添加了这一行，但我没有解决，即按钮中的href 仍然会转到localhost:8081 但它没有用

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

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

[更新：] 我正在使用 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。