Question

我一直在尝试使用React，redux，节点媒体服务器和json服务器模块将类似Twitch的应用程序部署到Heroku。但是，在生产过程中，尝试通过api请求连接我的React客户端和Express服务器时，我一直遇到问题。

我正在尝试通过我的动作创建者并通过使用基本网址为http://localhost:4000的axios发出实际请求，但是仅在我的本地计算机上有效。

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

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

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

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

这是我的api / server.js文件。我的Express服务器将在等于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加载一些数据，其请求URL为https://streamy-app.herokuapp.com/streams，但是我却得到了一个请求URL http://localhost:4000/streams，这当然导致了到下面的CORS问题

跨域请求被阻止：“同源起源”策略禁止读取http://localhost:4000/streams处的远程资源。（原因：CORS请求未成功。）

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

Answer 1

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

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

我还建议您：

更改部署方式，如here所述。
完成上述操作后，请考虑将API服务与静态服务器合并，这样就不需要多个端口，一切都会变得容易。

Answer 2

好吧，看来我已经知道了。我只是进入streams / client / package.json并添加了

"proxy":"http://localhost:4000"

然后我进入streams \ client \ src并删除了包含我的自定义axios和基本URL的api文件夹。为我的动作创作者开箱即用使用axios

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

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

现在，当在开发模式下本地运行时，我可以向http://localhost:4000/streams发出请求，但是将节点应用程序部署到Heroku之后，我成功地向https://streamy-app.herokuapp.com/streams发出了请求希望这对遇到苗条问题的人有所帮助。

如何从React Client向运行在Heroku平台上的Express服务器发出API请求

2 个答案: