跨域问题是前端开发中常遇到的一个问题，如果不处理好跨域问题，就会出现各种问题，比如无法访问数据、无法使用 Ajax 等等。本文将介绍如何使用 Hapi-cors 插件来解决跨域问题。
什么是跨域
在 web 开发中，如果一个页面的地址为 http://www.example.com，那么它只能请求这个域名下的资源，不能请求其他域名下的资源。如果要请求其他域名下的资源，就需要跨域访问。
跨域的解决方案
在前端开发中，跨域问题有多种解决方案，其中比较常见的有以下几种：
使用 JSONP：JSONP 只能用于 GET 请求，它利用了 script 标签可以跨域加载资源的特性，通过后端将返回的数据包装在一个指定的回调函数中，再返回给前端，前端通过回调函数获取到返回的数据。
使用 CORS：CORS 是一种官方推荐的解决跨域问题的方案，后端通过设置响应头，允许客户端跨域访问。
Hapi-cors 插件介绍
Hapi-cors 是 Hapi 框架下的一个解决跨域问题的插件，它只需要在后端的路由中配置一下就可以解决跨域问题，非常方便。
Hapi-cors 的使用
安装 Hapi-cors
使用 npm 安装 Hapi-cors 插件：
npm install hapi-cors
配置 Hapi-cors
在 Hapi 的路由中引入 hapi-cors 插件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - -----------------------------
----- ------ - --- -------------
----- -----
----- -----------
---
--------------------------- -------------
------------------ -- -
-- ----- -
----- ----
-
------------------- ------- --- ---------------------
---配置选项
Hapi-cors 插件支持以下选项：
- origins: 允许跨域访问的域名，可以是字符串、数组或函数。
- methods: 允许跨域访问的 HTTP 方法，默认为 GET,HEAD,PUT,PATCH,POST,DELETE。
- headers: 允许跨域访问的头信息，默认为 accept,content-type。
const corsHeaders = {
origin: ['*'],
methods: ['GET', 'POST', 'PUT', 'DELETE'],
headers: ['Accept', 'Content-Type', 'Authorization']
};
server.ext('onPreResponse', corsHeaders);示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - -----------------------------
----- ------ - --- -------------
----- -----
----- -----------
---
----- ----------- - -
-------- ------
-------- ------- ------- ------ ----------
-------- ---------- --------------- ----------------
--
--------------------------- -------------
--------------
------- ------
----- ----
-------- --------- -- -- -
------ ------ --------
-
---
--------------
------- ------
----- ------------
-------- --------- -- -- -
------ -
----- -
---- -- ----- ---------
---- -- ----- ------
-
--
-
---
--------------
------- -------
----- ------------
-------- --------- -- -- -
----- ------- - ----------------
---------------------
------ --------
-
---
------------------ -- -
-- ----- -
----- ----
-
------------------- ------- --- ---------------------
---总结
使用 Hapi-cors 插件可以轻松地解决跨域问题，让前端开发更加便捷。同时，Hapi-cors 的配置选项也非常灵活，可以根据实际需要进行配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654327437d4982a6ebccddcd