在同一个域上托管 React 应用和 Express 应用答案

【问题标题】：Hosting a React app and Express app on the same domain在同一个域上托管 React 应用和 Express 应用
【发布时间】：2019-07-27 02:17:11
【问题描述】：

我开发了一个调用 Express 后端的 React 应用。它们是两个完全不同的应用程序，位于两个不同的目录中，并且托管在不同的域上。我使用passport 对用户进行身份验证，并使用express-session 确保他们的会话持续存在。在开发中一切都按预期工作，但是当托管应用程序时，会话不会持续存在。我意识到这是因为应用程序位于不同的域中，并且来自我的 Express 服务器的 cookie 被浏览器阻止。为了解决这个问题，我需要做的是把我的应用程序放在同一个域上，我正在尝试找出最好的方法来解决这个问题。到目前为止，我已经提出了两种解决方案，但我想了解一下哪种解决方案最好，以及是否有比这两种更好的解决方案。

1) 将应用程序移动到同一目录中。我不确定如何在路由和定义我的应用程序的入口点方面进行此操作（如何同时在同一目录中启动两个应用程序？）。任何有关这方面的资源将不胜感激

2) 这两个应用程序目前都托管在 Heroku 上。我正在考虑购买一个域并使用 Route 53 别名将它们放在同一个域中，但我也不确定这背后的逻辑以及这是否会有效。

【问题讨论】：

标签： reactjs express cookies hosting express-session

【解决方案1】：

我之前必须实现这一点，就同时运行它们而言，我建议concurrently 同时执行两个启动脚本。当然，您必须在不同的端口上运行它们。

在项目结构方面，客户端或服务器都可以住在根，但只能是一个。另一个需要放在文件夹中，以保持清洁。无论哪个根目录都应该包含启动两个应用程序的入口点（也就是并发调用）。

在路由方面，由于您说它们是完全不同的应用程序，我假设您只需要服务器进行 API 或身份验证调用。在这种情况下，您将需要设置代理中间件来将 GET、POST 等请求视为服务器而不是客户端。为此，我推荐http-proxy-middleware。在简单的情况下，您可以在 package.json 中为您的 React 应用程序添加一个 proxy 属性，但它可能会变得很麻烦。 React Docs 提供了一个很好的设置教程。

【讨论】：

嘿，谢谢你的回答 :) 我实际上是用另一种方式解决的，你可以看看下面我的回答

【解决方案2】：

感谢 Enioluwa Segun 的回答，但实际上我决定尝试另一种方法，即购买域并统一该域上的两个应用程序，因为我记得我在另一个项目中做过类似的事情。它最终工作了，我的会话仍然存在！

更具体地说，我所做的是在 AWS Route 53 上购买了一个域，然后我按照 this 指南将其设置为我的前端 Heroku 应用程序的别名。然后我使用this 指南将api.mydomain.com 重定向到我的后端Heroku 应用程序。

【讨论】：