在前端开发过程中，跨域访问是一个常见的问题。在使用 Fastify 框架进行开发时，我们可以通过设置 CORS 头部来实现跨域访问。本文将详细介绍如何在 Fastify 中实现 CORS 跨域访问，并提供示例代码以供参考。
什么是 CORS？
CORS（Cross-Origin Resource Sharing）是一种机制，它允许网页向其他域名的服务器请求资源。CORS 的目的是为了解决浏览器的同源策略限制问题，使得 Web 应用可以使用更多的数据。
Fastify 中的 CORS
Fastify 是一个高效的 Node.js Web 框架，它支持插件机制，可以方便地扩展其功能。Fastify 内置的插件 fastify-cors 提供了简便的方法来实现 CORS。
安装 Fastify 和 fastify-cors
首先，我们需要安装 Fastify 和 fastify-cors 模块。可以通过 npm 进行安装：
npm install fastify fastify-cors --save
启用 fastify-cors 插件
安装完 fastify-cors 模块后，我们需要在 Fastify 中启用该插件。只需在 Fastify 的注册方法中添加该插件即可启用。下面是一个简单的示例：
-- -------------------- ---- ------- ----- ------- - -------------------- ----------------------------------------- - -- ------------ ---------- ------- --- -- ---------------- ----- ---- -- - --------------- -------- -- -------------------- ----- -------- -- - -- ----- ----- --- ------------------- --------- -- ------------ --
上述示例代码中，我们使用 fastify.register() 方法来将 fastify-cors 插件注册到 Fastify 中。在注册时，我们需要设置 origin 参数，指定允许跨域的源。在示例中，我们设置 origin: '*'，表示所有的源都允许跨域访问。实际应用中，我们可以根据实际需求设置允许访问的源。
自定义 CORS 头部
除了设置允许跨域的源之外，我们还可以通过 fastify-cors 插件来设置其他的 CORS 头部。下面是一个示例，展示了如何设置 Access-Control-Allow-Credentials 和 Access-Control-Allow-Headers 头部：
-- -------------------- ---- ------- ----- ------- - -------------------- ----------------------------------------- - ------- ---- ------------ ----- --------------- -------------------- --------------- ---------------- ---------------- -- ---------------- ----- ---- -- - --------------- -------- -- -------------------- ----- -------- -- - -- ----- ----- --- ------------------- --------- -- ------------ --
在该示例中，我们设置了 credentials 为 true，表示允许跨域请求携带凭证信息。同时，我们设置 exposedHeaders 为 ['X-Custom-Header']，表示允许访问响应头部的 X-Custom-Header 字段。最后，我们设置了 allowedHeaders 为 ['Content-Type', 'Authorization']，表示允许访问请求头部的 Content-Type 和 Authorization 字段。实际使用中，我们可以根据需要设置其他的 CORS 头部。
总结
本文介绍了如何在 Fastify 中实现 CORS 跨域访问。我们使用 fastify-cors 插件来轻松地设置 CORS 头部，从而允许跨域访问。通过本文的学习，我们可以在前端开发中更加方便地实现跨域访问。
参考资料
- Fastify：https://www.fastify.io/
- fastify-cors：https://github.com/fastify/fastify-cors
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b20bf968c7c53b06b03a9