前言
随着前端开发技术的日新月异，现在的前端工程师已经不仅仅是写写页面和样式那么简单了。更多的时候，我们需要设计后端服务接口，搭建本地服务器，甚至还需要深入底层，对服务器的运行状态进行监控。而 hapi-cors-headers 这个 npm 包，是帮助我们处理跨域问题的常用工具。
什么是跨域？为什么需要处理跨域问题？
跨域指的是，因为浏览器的同源策略(Same-Origin Policy)，所以在请求不同域名、协议或端口的资源时，会被浏览器阻止。这就是跨域问题。
为什么需要处理跨域问题呢？很简答，因为我们的前后端代码可能不在同一台机器上、不在同一个服务器上，前端页面想要调用后端的数据或接口，就需要跨域。而 hapi-cors-headers 这个 npm 包，就是处理跨域问题的一个工具。
好的，接下来，我们就一步步学习如何使用 hapi-cors-headers 这个工具。
hapi-cors-headers 实战
第一步，安装 hapi-cors-headers
在我们的 node 项目中使用 npm 安装 hapi-cors-headers：
npm install --save hapi-cors-headers
第二步，添加跨域配置
在我们的 hapi 项目中，添加跨域配置，如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------- - -----------------------------
----- ------ - --- -------------
----- ------------
----- ----
---
----- ---- - ----- -- -- -
----- -----------------
------- ----------------
-------- -
-------- ------
-------- ----------------- ---------------
-
---
-- ----
--------------
------- ------
----- ----
-------- --------- -- -- -
------ ------ --------
-
---
----- ---------------
------------------- ------- ----- -----------------
-
-------这里，我们使用了 async/await 和 Hapi 项目，如果你还没使用过，建议去了解一下。
你会发现，我们添加了一个 HapiCorsHeaders 的插件，options 参数就是 hapi-cors-headers 的配置，默认开启了所有的跨域请求并允许自定义请求头。
第三步，验证跨域请求
我们打开另一个前端项目，测试一下我们的跨域请求。
-- -------------------- ---- -------
------------------------------- -
------- ------
----- -------
-------- -
--------------- -------------------
---------------- ------- -------------
-
---------------- -- ----------------
---------- -- -------------------通过浏览器的控制台，你会发现我们成功发起了一次跨域请求，并成功获取了数据。现在，你已经成功使用 hapi-cors-headers 解决了跨域问题。
深入学习 hapi-cors-headers
上面，我们讲解了如何在 hapi 项目中使用 hapi-cors-headers 这个 npm 包。如果你还想深入了解 hapi-cors-headers，我们提供以下几点参考：
调整跨域策略
hapi-cors-headers 插件默认开启所有跨域请求并允许自定义请求头。但是，有时候，我们需要更灵活的跨域策略。比如，只允许某些域名进行跨域请求，或者只允许某些请求头。
针对这种需求，可以直接传入 allowOrigins 和 allowHeaders 数组，自定义解决跨域策略。
await server.register({
plugin: HapiCorsHeaders,
options: {
allowOrigins: ['http://test.example', 'https://dev.example'],
allowHeaders: ['Content-Type', 'Authorization']
}
});关闭跨域
有时候，我们的项目在特殊情况下，需要暂时关闭跨域。比如，我们的前端代码在本地，已经没有跨域问题了，而服务接口在服务器上，还需要处理跨域问题。
这种情况下，我们可以在关闭跨域时，通过传入 false 或 null 实现：
await server.register({
plugin: HapiCorsHeaders,
options: false // or null
});hapi-cors-headers 的其它参数
除了上述参数之外，hapi-cors-headers 还有其他参数，比如：
allowCredentials：是否允许携带 cookie，默认为 false。
exposeHeaders：设置响应头，可选值为数组。
maxAge：设置缓存时间，单位为秒。
结语
跨域问题在前端开发中特别常见，通过 hapi-cors-headers 这个 npm 包，我们可以快速解决跨域请求的问题。不仅如此，hapi-cors-headers 还提供更多灵活的跨域策略配置，帮助我们更好地掌控跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57892