什么是跨域请求？
跨域请求指的是在一个网站的前端页面中，向另一个网站的后端服务器发出请求。由于浏览器的同源策略限制，跨域请求会遇到一些问题。
同源策略是浏览器的安全机制之一，其规定了在同一来源（同一协议、主机名和端口号）下的页面间才能进行数据共享和交互，而在不同来源下则需要特殊处理。
为什么需要跨域请求？
有时我们需要在页面中调用其他网站的 API，或者在一个页面中通过 AJAX 请求后端数据。由于这些数据需要从另一个网站获取，因此就需要进行跨域请求。
Hapi 框架中的跨域请求问题
Hapi 是一个 Node.js 的 Web 框架，它提供了很多有用的功能，包括路由、处理数据、认证等。在 Hapi 框架中，由于其基于 Node.js，跨域请求也会受到同样的限制。
例如，在一个 Hapi 应用中，我们想要从前端页面向后端服务器发送 AJAX 请求，但由于跨域请求的限制，浏览器会拦截这个请求并返回错误信息。
解决方法
- 通过设置服务器端响应头的方式
最常用的方式是在服务器端设置响应头，允许来自特定域名的请求。这可以通过 Hapi 插件 hapi-cors 来实现。
首先，安装 hapi-cors 插件：
npm install hapi-cors
然后，在应用的启动文件中引入插件并注册：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------- - ----------------------------- ----- ------ - --- ------------- ----- ---------------- -- ---- --- --------------------------- ------------- -- ---
这里通过全局的 server.ext() 方法，在每次响应发送前都会调用 corsHeaders 中的逻辑判断是否允许跨域请求。
接着，在路由处理中，可以使用 hapi-cors 的 plugin 选项来单独针对某一路由开启跨域处理，比如：
-- -------------------- ---- -------
----- ------ - --- -------------
----- ---------------- -- ----
---
--------------
------- ------
----- ----
-------- --------- -- -- -
-- ---
--
-------- -
-------- -
------------ -
-------- ------
-------- ------------------
-------- ------- ------- ---------
-
-
-
---这里，我们开启了对所有来源的跨域请求，允许的 HTTP 方法为 GET、POST、DELETE，同时添加了一个自定义的 Authorization 请求头。
- 使用代理
还有一种解决跨域的方法是使用代理，将前端页面的请求发送到代理服务器，然后由代理服务器发送请求到目标服务器，最后将响应返回给前端。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -----------------
----- ------ - --- -------------
----- ---------------- -- ----
---
--------------
------- ------
----- ------------
-------- ----- --------- -- -- -
----- -------- - ----- ------------------------------------------
------ --------------
-
---这里我们将前端页面对 /api/data 的请求转发到一个代理服务器，在该服务器上使用 axios 库发送请求后将响应返回给前端页面。
结论
应对跨域请求问题，我们可以通过设置服务器端响应头或者使用代理来解决。在 Hapi 框架中，hapi-cors 插件提供了简单高效的解决方案。在使用时，应注意安全性和数据保护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6721cd452e7021665e08cab5