在今天的 Web 应用中，跨域请求是非常普遍的。一些常见的场景比如前后端分离的 SPA 应用和不同服务器之间的数据通信等都需要跨域请求。这时候，我们就需要使用 CORS 跨域资源共享技术来解决这个问题。Fastify 是一个快速、低开销、易于使用的 Web 框架，它提供了丰富的插件来帮助我们更方便地使用 CORS 技术，本文将深入探讨 Fastify 框架中关于 CORS 的应用，并提供相关的示例代码。
什么是 CORS
CORS，也就是跨域资源共享（Cross-Origin Resource Sharing），是一种授权机制，它允许 Web 应用从不同域访问其它域的资源。简单来说，当一个网页从一个域（例如 http://example.com/）发起 AJAX 请求访问另一个域（例如 http://api.example.com/）时，就需要使用 CORS 技术来授权请求。
CORS 使用了 HTTP 头信息来告诉浏览器哪些请求是被允许的。当一个 AJAX 请求发起时，在 HTTP 头中会携带 Origin 字段，服务器会检查这个字段来判断请求的来源是否在跨域白名单中。如果是，那么服务器会在 HTTP 头中设置 Access-Control-Allow-Origin 字段来允许该请求，否则将返回一个错误。这就是 CORS 的授权流程。
如何使用 Fastify 实现 CORS
对于 Fastify 框架，我们可以使用 fastify-cors 插件来简单地实现 CORS 技术。首先，我们需要安装 fastify-cors：
npm i fastify-cors
然后，我们需要在代码中引用 fastify-cors 插件，并使用 cors() 方法来启用它：
const fastify = require('fastify')
const cors = require('fastify-cors')
const app = fastify()
app.register(cors)这样，我们就成功启用了 Fastify 中的 CORS 插件。现在，我们可以设置一些配置项来控制 CORS 的行为。下面是一些示例代码：
-- -------------------- ---- ------- ----- ------- - - ------- --------------------- -------- ------- -------- --------------- ----------------- --------------- ------------------- ------------ ----- ------- ------ ------------------ ------ --------------------- --- - ------------------ --------
这里介绍一下各个配置项的含义：
origin：允许跨域的域名，可以是一个字符串或者一个正则表达式；methods：允许的 HTTP 方法，可以是一个数组或者一个字符串；allowedHeaders：允许的头信息，可以是一个数组或者一个字符串；exposedHeaders：允许暴露的头信息，可以是一个数组或者一个字符串；credentials：是否允许带有凭据的请求，是一个布尔值；maxAge：缓存 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 的时间（单位为秒）；preflightContinue：如果设置为 true，则将控制权交给下一个插件处理；optionsSuccessStatus：设置 preflight 响应的状态码。
我们可以根据实际情况来设置这些配置项来控制 CORS 的行为。
总结
在本文中，我们介绍了 CORS 技术的基本概念，以及在 Fastify 框架中如何使用 fastify-cors 插件来实现 CORS 技术。对于前端工程师和后端开发者来说，CORS 是一项非常重要的技术，会经常遇到跨域问题。掌握了 Fastify 中的 CORS 插件，我们可以更加简单地解决跨域问题，开发出更加完善的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d22e8bb5eee0b52598efab