跨域请求是前端常常会遇到的问题，因为浏览器会因为安全问题阻止跨域请求。原因是浏览器遵循同源策略，即只允许同一源的请求，而不允许其他源的请求。CORS（跨域资源共享）可以解决这个问题。Fastify 是一个快速而低开销的 web 框架，其支持简单的 CORS 配置。
本文将介绍 Fastify 中的 CORS 配置及其应用。我们会探讨 CORS 是什么，为什么需要它，以及如何在 Fastify 中使用。我们会深入讲解支持 CORS 的 HTTP 头，并提供一些实例代码，帮助您更好地理解和使用 CORS。
什么是 CORS？
CORS 是跨域资源共享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准的一部分，对于网络应用程序 非常重要 。CORS 允许在一个域名 (网址) 上运行的 Web 应用，访问另一个域名 (网址) 上的资源。在浏览器中，如果两个网页的协议、端口、和主机都相同，则可以相互访问对方的内容。如果其中一个不同，则访问即被禁止。
CORS 是一种安全机制，通过它您可以定义哪些网站可以访问您的 Web 应用，以及被允许的请求方法和头。通常，当您从一个源向另一个源发送 AJAX 请求时，您需要进行 CORS 配置。否则，浏览器将不允许您从该源请求数据。
Fastify 中的 CORS 配置
Fastify 是一个流行的 Web 框架，它提供了一个快速而高效的跨平台解决方案，可以轻松管理 RESTful API。在 Fastify 中配置 CORS 需要使用 fastify-cors 插件。使用这个插件，我们可以轻松配置 CORS 策略，以便不同的域和端点可以共享资源。
下面是 fastify-cors 插件安装的命令：
npm install fastify-cors --save
在 Fastify 中配置 CORS 非常简单，您只需要为 Fastify 调用 register() 并传递快捷设置或具体设置。快捷设置包括：
origin- 允许跨域的源URL，你可以指定一个数组或函数。methods- 允许这些 HTTP 方法请求allowedHeaders- 用逗号分隔的额外的Access-Control-Allow-Headers的列表exposedHeaders- 逗号分隔的额外Access-Control-Expose-Headers的列表credentials-Access-Control-Allow-Credentials标志
对于一个快速的跨域配置示例如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----------- - ------------------------ ----- --- - ---------- ------------------------- - -------- ----- -- ----- --------- ---------------------- -- --- ---- -- ---
支持 CORS 的 HTTP 头
CORS 通过 HTTP 头来说明请求源和目标资源的安全性，提供了一些指示信息，可以在请求头中设置。主要的 HTTP 头文件包括：
Access-Control-Allow-Origin- 指定被允许访问的源地址Access-Control-Allow-Methods- 指定允许使用的请求方式Access-Control-Allow-Headers- 指定允许的请求头Access-Control-Max-Age- 指定预检请求结果的最长时间（以秒为单位）Access-Control-Expose-Headers- 表示哪些头部可以公开，使用XMLHttpRequest.getResponseHeader()方法在客户端可见。
如果您不显式地设置这些头，浏览器会发出预检请求，以确定您对资源的访问权限。这是通过 OPTIONS 请求方法来实现的。您可以通过手动设置让浏览器跳过预检请求，以加快请求过程。
可以使用 fastify-cors 插件来轻松配置这些头，如下所示：
-- -------------------- ---- -------
------------------------- -
------- -------- --- -- -
-- ------------------------- -- ------ --- ---------- -
-------- ------
- ---- -
-------- -------
-
--
-------- ------- ------- -------
--------------- ---------------- -----------------
--------------- ----------------- -------------------
------------ -----
------- ------
------------------ ------
---如何使用 Fastify 的 CORS 插件
现在您已经了解了 Fastify 和 CORS，让我们看一下在应用程序中使用它们的过程。首先，您需要安装和配置 Fastify，以便它可以与 fastify-cors 插件一起使用。下面这个例子，向您展示了如何设置和配置 Fastify 以支持跨域请求：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - ------------------------
----- --- - ----------
------------------------- -
------- -------- --- -- -
-- ------------------------- -- ------ --- ---------- -
-------- ------
- ---- -
------ ---------- -----------
-
--
-------- ------- ------- -------
--------------- ---------------- -----------------
--------------- ----------------- -------------------
------------ -----
------- ------
------------------ ------
---
---------------- -- -- -
------------------- -- ------- -- ---- -------
---在这个示例中，我们定义了跨域请求的策略。origin 回调函数允许指定允许访问的源地址。对于 localhost，我们允许任何 HTTP 方法和指定的请求头。credentials 选项被设置为 true，这将允许处理带有凭证（例如 cookies 或用户名等）的请求。
结论
CORS 是一个支持跨域网络应用程序交互的安全解决方案。Fastify 提供了一个简单的 CORS 插件，您可以使用它来轻松配置跨域请求。在使用 Fastify 处理跨域请求时，请记住使用 fastify-cors 插件来设置安全的 HTTP 头，以确保您的客户端应用程序能够安全地与您的 API 交互。如果您遇到 CORS 问题，快速而轻松的 Fastify，再加上 fastify-cors 插件，可以帮助您做到这一点。
希望这篇文章对你有所帮助，如果您有任何问题或建议，请随时在下面的评论区留言。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673428180bc820c58246f874