跨域（Cross-Origin Resource Sharing，CORS）是 Web 开发中常见的一种限制，它是一个安全机制，用于防止浏览器中的 JavaScript 代码实现通过 XMLHttpRequest 或 Fetch 发送消息到另一个域。例如，如果您的网站在 example.com 域上，那么您的 JS 代码不能轻易地向 example.net 或其他不同于 example.com 域的服务器发送请求。
然而，在某些情况下，您可能需要跨域请求。这时您需要配置服务器以实现跨域请求。HapiJS 是一个 Node.js 的 Web 框架，非常适合构建 Web 应用程序，它提供了很多有用的功能，其中包括跨域支持。在本文中，我们将介绍如何在 HapiJS 中实现跨域请求。
HapiJS 的跨域插件
Hapi 可以使用 hapi-cors 插件来实现跨域请求。这个插件已经集成到 Hapi 的核心中，所以您可以直接使用，无需再安装它。使用 hapi-cors 插件时，您可以配置 allowedOrigins，allowedMethods，allowedHeaders 等选项，以允许指定的跨域来源或请求方法或请求头。
以下是在 HapiJS 中安装和配置 hapi-cors 插件的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------------
----- ------ - -------------
----- -----
----- -----------
---
----- ---- - ----- -- -- -
----- -----------------
------- ---------------------------
-------- -
-------- --------------------------
-------- ------- ------- ------ ----------
-------- ------------------
------------ ----
-
---
--------------
------- ------
----- ----
-------- --------- -- -- -
------ ------ --------
-
---
----- ---------------
------------------- ------- -- ---------------------
--
-------在上面的示例代码中，我们配置了 origins，methods，headers 和 credentials 选项，以允许 localhost:8000 域的 GET、POST、PUT、DELETE 请求，并允许 Authorization 请求头，同时允许通过 cookies 和/或授权头进行身份验证的跨站点访问。
跨域请求与 HapiJS
在配置服务器以实现跨域请求后，您就可以通过 JavaScript 前端代码发送跨域请求了。以下是一个示例：
-- -------------------- ---- -------
----- ------- - --- -----------------
------------------- ------------------------ ------
----------------------- - ----- -- ---- ------ ----
----------------------------------------- ------- - - ------- -- -----
-------------- - ---------- -
-- --------------- -- --- -- -------------- - ---- -
-- ------
- ---- -
-- ------
-
--
--------------- - ---------- -
-- ----
--
---------------在上面的示例代码中，我们创建了一个 XMLHttpRequest 对象，并设置其 withCredentials 属性启用携带 cookie 或授权头，然后使用 setRequestHeader() 方法添加授权头，最后使用 send() 方法发送 GET 请求。
总结
HapiJS 是构建 Web 应用程序的强大工具，它提供了很多有用的功能，包括跨域支持。使用 hapi-cors 插件可以轻松地配置服务器以允许跨域请求，并可方便地指定允许来源、请求方法、请求头等选项，以增强安全性。本文介绍了如何在 HapiJS 中安装和配置 hapi-cors 插件，并提供了一个 JavaScript 示例代码，帮助您理解如何通过前端代码发送跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64875d7548841e9894608360