node.js - 如何从反应客户端向运行在 Heroku 平台上的表达服务器发出 API 请求

问题描述

我一直在尝试使用 react、redux、node media server 和 json server 模块将类似 Twitch 的应用程序部署到 Heroku。但是，在生产期间尝试通过 api 请求连接我的反应客户端和快速服务器时，我一直遇到问题。

我试图通过我的动作创建者并使用带有http://localhost:4000基本 URL 的 axios 来发出实际请求，但这仅适用于我的本地计算机。

 const response = await streams.get("/streams");

 dispatch({ type: FETCH_STREAMS, payload: response.data });
};

你可以在https://github.com/XorinNebulas/Streamy查看我的完整仓库

您还可以在 https://streamy-app.herokuapp.com/上查看我在 Heroku 上当前部署的站点版本

这是我的 api/server.js 文件。我的快速服务器将在等于 process.env.PORT 的随机端口上进行监视，因此我无法知道如何在生产期间通过我的动作创建者向该随机端口发出网络请求。

const path = require("path");
const cors = require("cors");
const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("db.json");
const middlewares = jsonServer.defaults({
  static: "../client/build"
});
const PORT = process.env.PORT || 4000;

// Set default middlewares (logger, static, cors and no-cache)
server.use(cors());
server.use(middlewares);

if (process.env.NODE_ENV === "production") {
  // Add custom routes before JSON Server router
  server.get("*", (req, res) => {
    res.sendFile(
      path.resolve(__dirname, "../", "client", "build", "index.html")
    );
  });
}

// Use default router
server.use(router);
server.listen(PORT, () => {
  console.log(`JSON Server is listening on port ${PORT}`);
});

我希望请求能够通过并从 api/db.json 加载一些数据，resquest url 为https://streamy-app.herokuapp.com/streams但我得到的请求 url 为http://localhost :4000/streams，这当然会导致下面的 CORS 问题

跨域请求被阻止：同源策略不允许在http://localhost:4000/streams读取远程资源。（原因：CORS 请求未成功）。

我真的很感激任何建议，我已经为此工作了几天。

标签： node.jsreactjsexpresscorsjson-server

首先，您应该知道 Heroku不允许公开多个端口，这意味着您应该将多个端口的方法更改为其他方式（请参阅此答案）。

其次，该文件client/src/apis/streams.js被硬编码配置为发送请求http://localhost:4000/- 这不是一个好主意。
无论您选择哪种方法——甚至部署到另一个主机服务器——您都需要根据环境动态配置 API 端点。

我还建议您：

更改部署反应的方式，如此处所述。
做完以上，考虑把你的API服务和静态服务器整合，这样就不需要多个端口，然后一切就变得简单了。

node.js - 如何从反应客户端向运行在 Heroku 平台上的表达服务器发出 API 请求

问题描述

解决方案

推荐阅读