在现代 web 应用程序中，Headless CMS 成为了越来越普遍的选择。它们提供了一个 API，用于从一个集中的内容储存该的方式进行内容管理，并使其可用于您的站点和应用程序的所有其他部分。但是，当涉及到安全和跨站数据来源时，Headless CMS 可能会导致某些挑战。本文将探讨这些挑战以及如何使用一些简单的技术处理它们。
什么是 Headless CMS
Headless CMS 是一种新兴的内容管理模式，旨在更好地支持服务端渲染（SSR）。它与传统的 CMS 不同，传统 CMS 主要目的是为了页面编写器，比如 WordPress 和 Drupal 等，在这些 CMS 中，CMS 能够执行其自己的前端渲染过程，这些 CMS 能够像几乎任何 web 应用程序一样解析 HTML 和 CSS。相较于传统的 CMS，Headless CMS 将内容管理模块与前端渲染解耦，使前端和服务端分离，更趋于纯静态视图和聚焦页面内的某个小部件，从而实现了更好的性能和可扩展性。
Headless CMS 跨站数据来源问题
使用 Headless CMS 时，开发者需要注意跨站数据来源问题，特别是在针对 JavaScript 应用程序进行开发时。跨站来源数据问题是，当一个应用程序尝试从一个域中读取具有关键信息的数据时，用户的个人信息可能被盗用。在这种情况下，由于浏览器规则阻止此跨站点访问，因此开发者需要使用 CORS(headless-cms)技术来允许访问。详细有关 CORS 的内容可以参考这里，作者本文不再进行赘述。
如何使用 CORS 处理 Headless CMS 数据来源问题
需要注意的是，在使用 Headless CMS 之前，应该先检查其是否支持 CORS 以进行数据访问。许多 Headless CMS 已经支持了这一点，但也有一些没有支持（或支持不完善），因此可能需要使用一些工具。
下面是一些示例代码来展示如何在接受 Headless CMS 的数据时处理 CORS 问题。
-- -------------------- ---- -------
------ ----- ---- --------
----- ---------------- - ----------------------------------
-- ------------
------ -------- ------------------ -
------ --- ----------------- ------- -- -
----------------------------- -
-------------- -------
---------- ---- -- -- -
--------------
-----------------
---
-
-- -------
----- ------- - -------------------
----- ------- - -------------------
----- ---- - ----------------
----- ---------------- - ----------------------------------
----- --- - ----------
----- --------------- - ----- ---- -- -
--- --- - ----------------------------------------
---------------------------------
--
----------------
------------ -----------------
-----------------
----------------- -------------------------在第一个代码片段中，使用前端主流的 JSONP技术，避开了 CORS。 JSONP 通过动态创建 <script> 标签实现。封装了一个JSONP方法，API与axios类似，支持传请求URL和可选配置项。如果你将上例代码运行在本地页面，是不具备跨域访问的，而此处则不失为一个好的解决方案。
在第二个示例中，使用了 Node.js 进行反向代理。该代理服务器会将接收到的请求传递给 HEADLESS CMS 服务器。由于是本地服务器之间的通信，不会遇到跨站数据来源问题，因此可以使用跨站传递数据的所有功能。
以上示例都是比较简单的应对跨站数据来源问题的方案，如需更加深入地了解和处理跨站数据来源问题，您应该参考官方文件重点了解其他可行方案。
总结
Headless CMS是使用 RESTful API 进行内容管理并使其可变的好方式。但是，开发人员必须处理跨站数据来源问题以确保其网站的安全性。使用 CORS 技术是最常见的解决方案之一，而在上文提供的示例中，您可以看到使用 JSONP 和反向代理作为解决跨站数据来源问题的两种不同方案。本文的重点是深入探讨了 Headless CMS 的跨站数据来源问题，并为您提供了两种解决该问题的示例代码。最终目的是帮助您了解如何更好地使用 Headless CMS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466fcbd968c7c53b07682dc