时间戳

首页 > 解决方案 > 域感知反应路由器

javascript - 域感知反应路由器

问题描述

我有一个使用 React Router 并根据以下路径提供内容的应用程序。在这个例子中，Sally 和 Sunny 在下面的 url 中有自己的页面，

现在我想做的是在请求来自另一个主机时匹配每一个，如下所示，

我想要的是使用相同的应用程序并让它匹配和服务器路由 /sally 和 /sunny 在不同的子域和域上。需要明确的是，我在 herapp.com hisapp.com 上分别有 sally 和 Sunny 的 DNS CNAME 条目。

React Router 可以做到这一点吗？谢谢！

标签： javascriptreactjsreact-routerhostname

解决方案

React Router 无法做到这一点。React Router 使用历史 API 来推送新的 url 状态而不触发页面刷新。它通过调用 来做到这一点window.history.pushState，如果您传递不同的来源（子域），它将引发错误。从pushState文档...

新 URL 必须与当前 URL 同源；否则， pushState() 将抛出异常。

出于安全目的，子域被浏览器视为单独的来源，具有单独的CORS限制，因为它们通常指向不同的机器。

您能做的最好的事情是使用一些服务器端代码（例如 nginx 配置）将请求反向代理sally.herapp.com到myapp.com/sally. 这将在 处提供页面sally.herapp.com，但仍需要往返于服务器。

您还不如拥有一个单独的 JS 捆绑包，其中每个子域都有自己的反应路由器实例，因为反应路由器无法在没有往返服务器的情况下跨子域链接，因此无论如何您都失去了单页应用程序的好处

推荐阅读