在同一域上托管React应用程序和Express应用程序

Question

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

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

2）两个应用当前都托管在Heroku上。我当时正在考虑购买一个域，并使用Route 53别名将其置于同一域上，但我也不确定其背后的逻辑以及这是否有效。

Answer 1

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

就项目结构而言，客户端或服务器都可以位于根目录中，但只能位于其中。另一个则需要放在文件夹中，以保持环境清洁。根目录中的任意一个都应包含启动两个应用程序的入口点（即并发调用）。

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

Answer 2

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

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