在前端开发中，跨域问题一直是一个常见的难题。Fastify 是一个快速、低开销、可扩展的 web 框架，它提供了一种简便的方法来处理跨域问题。在本文中，我们将探讨 Fastify 中的跨域处理和 CORS 设置。
什么是跨域？
跨域是指在浏览器中，一个网页的脚本试图访问另一个网页的内容。由于浏览器的同源策略，这种访问通常会被阻止。
同源策略是一种安全机制，它要求网页只能访问与其自身来源相同的资源。换句话说，网页只能与同一个协议（http 或 https）、同一个域名和同一个端口号的资源进行交互。如果网页要访问跨域资源，就必须通过一些特殊的手段来解决跨域问题。
Fastify 中的跨域处理
Fastify 提供了一个名为 fastify-cors 的插件来处理跨域问题。该插件基于 CORS（跨域资源共享）规范，它允许服务器指定哪些源可以访问其资源。
要使用 fastify-cors 插件，我们需要先安装它：
npm install fastify-cors
然后在 Fastify 应用程序中引入它：
const fastify = require('fastify')()
const cors = require('fastify-cors')
fastify.register(cors)这样，Fastify 就会自动处理跨域请求，我们无需手动设置响应头。
CORS 设置
如果我们需要更细粒度地控制 CORS，可以使用 fastify-cors 的选项。以下是一些常用选项：
- origin：指定允许的来源。可以是一个字符串、一个正则表达式、一个函数或一个数组。默认为
*，表示允许任何来源。 - methods：指定允许的 HTTP 方法。可以是一个字符串、一个数组或一个布尔值。默认为
'GET,HEAD,PUT,PATCH,POST,DELETE'。 - allowedHeaders：指定允许的请求头。可以是一个字符串、一个数组或一个布尔值。默认为
undefined，表示允许任何请求头。 - exposedHeaders：指定允许客户端访问的响应头。可以是一个字符串或一个数组。默认为
undefined，表示不允许访问任何响应头。 - credentials：指定是否允许发送凭据（如 cookies 或 HTTP 认证信息）。可以是一个布尔值或一个字符串。默认为
false。 - maxAge：指定预检请求的缓存时间（以秒为单位）。可以是一个数字或一个字符串。默认为
undefined，表示不缓存预检请求。
以下是一个示例：
-- -------------------- ---- ------- ----- ------- - -------------------- ----- ---- - ----------------------- ---------------------- - ------- ---------------------- -------- ------- -------- --------------- ----------------- --------------- ---------------- ------------ ----- ------- ----- --
在这个示例中，我们只允许来自 https://example.com 的请求，并且只允许使用 GET 和 POST 方法。我们还指定了允许的请求头为 Content-Type，允许客户端访问的响应头为 X-My-Header，允许发送凭据（如 cookies 或 HTTP 认证信息），预检请求的缓存时间为 86400 秒。
结论
Fastify 提供了一种简便的方法来处理跨域问题。我们可以使用 fastify-cors 插件来自动处理跨域请求，也可以使用选项来更细粒度地控制 CORS。通过了解和使用 Fastify 中的跨域处理和 CORS 设置，我们可以更好地保护我们的 Web 应用程序，并提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675b3a0e33771ef380838b23