跨域请求是指在浏览器中，一个网页的 JavaScript 代码向另一个域名的服务器请求数据时，由于浏览器的同源策略，无法直接访问该服务器的数据，需要使用跨域技术来实现。本文将介绍如何使用 Fastify 和 CORS 库来实现跨域请求。
什么是 Fastify？
Fastify 是一个快速、低开销且可扩展的 Node.js Web 框架，它专注于提供最佳的开发者体验和高性能。Fastify 的性能是其最大的卖点之一，它可以处理每秒数十万个请求。Fastify 还提供了一系列插件和工具，使得开发者可以快速构建出高效的 Web 应用程序。
什么是 CORS？
CORS（Cross-Origin Resource Sharing）是一种 Web 浏览器的机制，用于让 Web 应用程序在浏览器中跨域访问其他域名的资源。CORS 通过在 HTTP 头中增加一些特殊的字段来授权浏览器跨域访问其他域名的资源。
使用 Fastify 和 CORS 实现跨域请求非常简单，只需要安装 Fastify 和 CORS 库，然后在代码中使用即可。
安装 Fastify 和 CORS 库
首先，我们需要使用 npm 安装 Fastify 和 CORS 库：
npm install fastify cors
创建 Fastify 应用程序
接下来，我们需要创建一个 Fastify 应用程序。在这个应用程序中，我们将使用 Fastify 的路由功能来定义我们的 API。
-- -------------------- ---- -------
----- ------- - --------------------
--------------------- --------- ------ -- -
------------ -------- ------ ------- --
--
-------------------- ----- -- -
-- ----- -
------------------
---------------
-
------------------- --------- -- ---- ------
--这个应用程序很简单，我们只是定义了一个路由，当访问 http://localhost:3000/hello 时，返回一个包含消息 Hello World! 的 JSON 对象。
添加 CORS 支持
现在我们已经创建了一个简单的 Fastify 应用程序，下一步是添加 CORS 支持。我们可以使用 Fastify 的 CORS 插件来完成这个任务。在我们的代码中添加如下代码：
-- -------------------- ---- -------
----- ------- - --------------------
----- ---- - ---------------
-------------------
--------------------- --------- ------ -- -
------------ -------- ------ ------- --
--
-------------------- ----- -- -
-- ----- -
------------------
---------------
-
------------------- --------- -- ---- ------
--现在，我们已经添加了 CORS 支持。当我们访问 http://localhost:3000/hello 时，我们可以看到在 HTTP 头中添加了一些特殊的字段，这些字段允许浏览器跨域访问我们的 API。
发起跨域请求
现在，我们已经创建了一个支持跨域请求的 Fastify 应用程序，下一步是发起跨域请求。我们可以使用浏览器中的 JavaScript 来发起跨域请求。在下面的代码中，我们使用 fetch 函数来发起跨域请求：
fetch('http://localhost:3000/hello')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))这个代码将发起一个 GET 请求，请求地址为 http://localhost:3000/hello，然后将响应转换为 JSON 对象，并输出到控制台。我们可以在浏览器的开发者工具中查看输出结果。
结论
在本文中，我们介绍了如何使用 Fastify 和 CORS 库来实现跨域请求。我们首先介绍了 Fastify 和 CORS 的基本概念，然后演示了如何使用 Fastify 和 CORS 库来实现跨域请求。通过本文的学习，读者可以了解如何使用 Fastify 和 CORS 库来解决跨域问题，并在实际项目中应用这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673eb89290e7ed93bee46f5e