在现代 Web 应用程序中，跨域资源共享（CORS）是一项必不可少的功能。然而，处理跨域请求并不总是那么简单，特别是当你使用 Fastify 时。本文将介绍如何在 Fastify 应用程序中处理跨域请求，包括如何设置 CORS 头和如何处理预检请求。
什么是跨域资源共享？
跨域资源共享（CORS）是一种机制，允许 Web 应用程序从不同域访问其资源。在 Web 应用程序中，不同的域指的是不同的主机、端口或协议。通常情况下，浏览器会阻止跨域请求，以保护用户数据的安全性。
如何设置 CORS 头？
在 Fastify 应用程序中，你可以使用 fastify-cors 插件来设置 CORS 头。该插件是一个 Fastify 插件，它提供了一组选项，可以轻松地配置 CORS 头。
首先，你需要安装 fastify-cors 插件：
npm install fastify-cors
然后，你可以将插件添加到 Fastify 应用程序中：
-- -------------------- ---- ------- ----- ------- - -------------------- ----------------------------------------- - -- --- ---- ------- ---- -- -------------------- ----- -------- -- - -- ----- ----- --- ------------------- --------- -- ------------ --
在上面的代码中，我们将 fastify-cors 插件添加到 Fastify 应用程序中，并传递了一些选项。下面是一些常用的选项：
origin：允许的来源。可以是字符串、正则表达式或函数。methods：允许的 HTTP 方法。allowedHeaders：允许的请求头。exposedHeaders：允许的响应头。credentials：指示是否允许发送凭据（如 cookie 和认证头）。maxAge：指示预检请求的有效期（以秒为单位）。
例如，下面的代码将允许来自任何来源的 GET 和 POST 请求，并允许发送凭据：
fastify.register(require('fastify-cors'), {
origin: '*',
methods: ['GET', 'POST'],
credentials: true
})如何处理预检请求？
当使用某些 HTTP 方法（如 PUT、DELETE）或发送某些请求头（如 Authorization）时，浏览器会发送一个预检请求，以确定服务器是否允许该请求。预检请求是一个 OPTIONS 请求，其中包含一个 Access-Control-Request-Method 头和一个 Access-Control-Request-Headers 头。
在 Fastify 应用程序中，你可以使用 fastify-cors 插件来处理预检请求。该插件会自动回复预检请求，并设置正确的 CORS 头。
例如，下面的代码将允许来自任何来源的 GET 和 POST 请求，以及来自 example.com 的 PUT 请求，并允许发送凭据：
fastify.register(require('fastify-cors'), {
origin: ['*', 'example.com'],
methods: ['GET', 'POST', 'PUT'],
credentials: true
})示例代码
下面是一个完整的 Fastify 应用程序，演示了如何设置 CORS 头和处理预检请求：
-- -------------------- ---- ------- ----- ------- - -------------------- ----------------------------------------- - ------- ---- -------- ------- -------- ------------ ---- -- ---------------- --------- ------ -- - ------------ -------- ------- ------- -- -- ----------------- --------- ------ -- - ------------ -------- ------- ------- -- -- -------------------- ----- -------- -- - -- ----- ----- --- ------------------- --------- -- ------------ --
在上面的代码中，我们使用 fastify-cors 插件设置了 CORS 头，并添加了两个路由处理程序，用于处理 GET 和 POST 请求。当浏览器发送预检请求时，fastify-cors 插件会自动回复该请求。
结论
在本文中，我们介绍了如何在 Fastify 应用程序中处理跨域请求。我们使用 fastify-cors 插件设置了 CORS 头，并演示了如何处理预检请求。希望这篇文章对你有所帮助，可以让你更轻松地处理跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6742b673db344dd98de2e686