背景
在前端领域中，经常会遇到跨域问题，由于安全原因，浏览器禁止跨域访问，这对开发人员来说是一个巨大的挑战。一般解决跨域问题的方式有很多，但是 Fastify 提供了一种非常简单易用的方式，来解决跨域问题。
Fastify 是什么
Fastify 是一个快速、低开销以及可扩展的 Node.js Web 框架。它借鉴了其他 Node.js Web 框架的优秀部分，并在此基础上做了优化和提高，使得 Fastify 成为了一个突出的 Web 框架。
如何使用 Fastify 解决跨域问题
Fastify 封装了基于 CORS 的跨域请求。CORS（Cross-Origin Resource Sharing）是一种机制，能让不同源的服务器资源进行交互。当一个域的 JavaScript 脚本去请求另一个域的资源时，就是跨域的操作。Fastify 可以通过设置两个简单的头部，解决跨域问题。
Access-Control-Allow-Origin
该头部用来控制跨域资源是否能够被请求。如果设置 "*"，则表示所有域都可以进行访问。
Access-Control-Allow-Headers
该头部告诉浏览器允许客户端发送的请求头有哪些。一些常见的请求头包括："Content-Type"、"Authorization"、"X-Requested-With" 等。
在 Fastify 中，设置这两个头部非常简单，只需要在路由处理程序中添加以下代码：
fastify.get('/', function (request, reply) {
reply.header('Access-Control-Allow-Origin', '*')
reply.header('Access-Control-Allow-Headers', 'Content-Type, Authorization')
// 执行其他操作
})这个示例代码会在 HTTP GET 请求的响应头中添加两个头部。
实际应用
假设我们有一个简单的客户端，需要向远程服务器发送 HTTP 请求，获取用户数据。以下是客户端请求的示例代码：
-- -------------------- ---- -------
--------------------------------------- -
------- ------
-------- -
--------------- -------------------
---------------- ------- - - -----------
-
-------------------------- -
------ ---------------
---------------------- -
-----------------
------------------------ -
--------------------
--在这个例子中，我们使用 fetch 函数发送了一个 HTTP 请求。请求中包含了两个请求头："Content-Type" 和 "Authorization"。服务器需要返回一些用户数据。然而，当客户端尝试通过浏览器发送请求时，最终将失败，因为浏览器会阻止跨域访问。
我们可以通过设置正确的头部来解决跨域问题。以下是服务器端代码的示例：
-- -------------------- ---- -------
----- ------- - --------------------
------------------------ -------- --------- ------ -
----- ----- - ------- ---- ------- --------- ------ ---- ------- -------
----- ---- - ------------ -- ---- --- ------------------
-- ------ -
------------------------------------------- ----
-------------------------------------------- -------------- ---------------
----------------
- ---- -
---------------------------- ----- --- --------
-
--
-------------------- -------- ----- -------- -
-- ----- -
------------------
---------------
-
------------------- --------- -- ------------
--该示例代码使用 fastify 来创建一个简单的服务器，当请求 /user/:id 时，返回一个用户的对象。
在响应中，我们设置了两个头部，以允许跨域请求访问这个资源。
现在，当客户端发送请求时会获得正常的响应。
总结
通过 Fastify 的封装，我们可以非常简单地解决跨域问题。只需要在路由处理程序中设置两个头部，就能让客户端离开浏览器直接访问远程资源。这大大方便了开发人员的工作。
我们希望这篇文章对你有所帮助，并让你了解如何使用 Fastify 来解决跨域问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b1167968c7c53b0d6e4a1