前言
在 Web 开发中，跨域问题是很常见的问题，因为浏览器本身为了保证用户安全而实现了同源策略，也就是说，只有同一个域名下的网页才能够互相进行访问。而跨域问题则是出现在不同域名下的网页之间的交互中。
在前端领域中，我们经常会遇到需要进行跨域处理的场景，例如一些特殊的 API 接口、跨域资源共享 (CORS) 等，而解决跨域问题的方式也是多种多样的。本篇文章将会介绍在 Fastify 框架中实现跨域的方案。
Fastify
Fastify 是一个快速、低开销并且开发人员友好的 Web 框架。它是基于 Node.js 平台开发的，使用 JavaScript 编写，是当前比较热门的一款 Node.js 框架之一。
Fastify 号称是“世界上最快的 Node.js Web 框架之一”，主要是因为 Fastify 采用了多种优化策略，例如声明式路由、严格的 JSON 格式验证、支持异步消费、高效的插件系统等。所以，在性能方面，Fastify 的确做到了非常出色。
解决跨域问题
在 Fastify 框架中，我们可以通过 fastify-cors 插件来解决跨域问题。fastify-cors 是 Fastify 官方提供的一个 CORS 插件，用于控制跨域资源共享。
安装插件
首先，我们需要安装 fastify-cors 插件。使用 npm 安装即可：
npm install fastify-cors
加载插件
安装好 fastify-cors 插件之后，我们需要在项目中加载这个插件，在 Fastify 应用中添加如下代码：
-- -------------------- ---- ------- ----- ------- - -------------------- ----------------------------------------- - ------- ----- -------- ------- ------- ------ --------- ----------- ------------ ---- -- ---------------- ----- ------ -- - ------------ ------ ------- -- -- -------------------- ----- -------- -- - -- ----- ----- --- ------------------- --------- -- ------------ --
具体来说，我们需要调用 Fastify 的 register() 函数加载 fastify-cors 插件。在 register() 函数中，我们需要传递一个配置对象，这个配置对象包含以下三个参数：
- origin：指定允许跨域的网址。可以设置为 true，表示允许所有网址跨域，在开发环境中可以使用；也可以设置为字符串或数组，表示允许指定的网址跨域，例如 'https://example.com' 或 ['https://example.com', 'https://www.example.com']；
- methods：指定允许的 HTTP 方法。可以设置为数组，例如 ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']；
- credentials：指定是否携带 Cookie 和 HTTP 认证信息。可以设置为 true 或 false。
示例
接下来，我们可以使用实际的例子来验证 fastify-cors 插件是否能够解决跨域问题。
以一个简单的例子为基础，首先创建一个 index.html 文件，内容如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ---- ---------------
------- --------------------------------------------------------------------------------
-------
------
------- ----------------------
--------
-------------------------------------------------------- -- -- -
------------------------------------------- -- -
---------------------
------------ -- -
------------------
--
--
---------
-------
-------这个 HTML 文件中包含了一个发送 GET 请求的按钮。当我们在点击这个按钮的时候，会发送一个 GET 请求到 Fastify 应用中。
接下来，我们在 Fastify 应用中添加路由处理函数，返回一个 JSON 对象，内容如下：
fastify.get('/', (req, reply) => {
reply.send({ hello: 'world' })
})
fastify.listen(3000, (err, address) => {
if (err) throw err
console.log(`Server listening on ${address}`)
})运行 Fastify 应用：
node app.js
在浏览器中打开 index.html 文件，点击按钮，可以看到如下结果：
{hello: "world"}提示：由于浏览器的同源策略，如果将 index.html 文件直接打开，是无法请求 Fastify 应用返回数据的，必须通过 Web 服务器来访问 index.html 文件才能够正常请求 Fastify 应用返回数据。
总结
Fastify 是一个快速、低开销并且开发人员友好的 Web 框架，在解决跨域问题方面，我们可以使用 fastify-cors 插件来进行解决。
在实际开发中，我们需要针对实际业务场景来合理配置 fastify-cors 插件，避免产生安全隐患。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647dba98968c7c53b088a010