React.js 是前端开发中广泛使用的一个 JavaScript 库，它可以帮助开发者更高效地创建单页应用（Single Page Application，SPA）。但是，在 Safari 浏览器中，React.js SPA 应用有可能会被拦截，并出现 “限制访问” 或 “输入网址” 等提示信息。这个问题在集成了 React.js 的应用中尤为常见，本文将详细介绍这个问题的原因，并给出解决方案。
问题原因
React.js SPA 应用的基本特点是使用了浏览器前端路由，用户切换不同页面时，实际上浏览器没有向服务器发出请求，而是在前端进行切换。这种方式看起来很高效，但在 Safari 浏览器中，由于一些历史原因，会导致这种路由机制被视为“危险”行为。当用户在 SPA 应用中刷新页面或直接输入网址时，Safari 会认为这是一种攻击行为，从而拦截该请求。
另一个可能的原因是，Safari 浏览器对 cookie 的安全性要求比较高，如果 cookie 中包含了某些字段，也会触发拦截。
解决方案
针对以上两种原因，以下是两种解决方案。
解决方案一：使用 HashRouter
React.js 中有两种前端路由方式：BrowserRouter 和 HashRouter，其中 HashRouter 使用 URL 的哈希值进行路由切换。在 Safari 浏览器中，Hash 路由不会被视为危险行为，因此可以解决被拦截的问题。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
-------- ----- -
------ -
------------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
-------------
--
-
------ ------- ----解决方案二：配置服务端
另一种解决办法是在服务端进行设置，使得响应头加上必要的字段，例如 SameSite=none 和 Secure。这样可以让 Safari 更容易接受 cookie，并避免被视为危险行为。示例代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------ - -------------------------
----- --- - ----------
------------------------
-------------------- ----- ---- -- -
------------------ ----- ----- -
--------- -------
------- -----
---
---------- ----- ----- ---- ---
---
---------------- -- -- ------------------- ------- -- ---- ---------总结
在 Safari 浏览器中，React.js SPA 应用容易被拦截，但这并不意味着无法解决。本文介绍了两种解决方案，一种是使用 HashRouter 进行前端路由，另一种是在服务端设置 HTTP 响应头属性。通过本文的介绍，我们可以更好地理解这个问题的原因，并且知道该如何解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c3e6548841e9894a95952