在开发前端应用时，经常需要和后端进行数据交互。由于浏览器的同源策略，如果前端应用和后端不在同一个域名下，会受到限制，导致无法正常进行数据交互。为了解决这个问题，我们可以在后端启用 CORS（跨域资源共享）。
Fastify 是一个高效的 Node.js Web 框架，它提供了一种简单的方式来启用 CORS。但是，在启用 CORS 后，我们可能会遇到一些问题。本文将介绍 Fastify 中启用 CORS 后出现的问题，并提供解决方案。
启用 CORS
在 Fastify 中启用 CORS 非常简单，只需要使用 fastify-cors 插件即可。安装 fastify-cors：
npm install fastify-cors
然后在 Fastify 应用中使用 fastify-cors 插件：
-- -------------------- ---- ------- ----- ------- - -------------------- ----------------------------------------- - ------- ---- -- -------------------- ----- -------- -- - -- ----- ----- --- ------------------- --------- -- ------------ --
上面的代码中，我们启用了 fastify-cors 插件，并将 origin 设置为 true，表示允许所有来源的请求。如果你只想允许特定的来源请求，可以将 origin 设置为一个字符串或正则表达式，或者一个返回这些值的函数。更多配置选项可以参考 fastify-cors 的文档。
出现的问题
在启用 CORS 后，我们可能会遇到以下问题：
OPTIONS 请求无法响应
由于浏览器的同源策略，当我们在前端应用中发起跨域请求时，浏览器会先发送一个 OPTIONS 请求，以确定服务器是否允许该请求。如果服务器允许该请求，浏览器才会发送真正的请求。
如果在启用 CORS 后，我们的服务器没有正确响应 OPTIONS 请求，浏览器会报错，导致真正的请求无法发送。
没有正确设置 CORS 头
在启用 CORS 后，我们需要在响应中设置 CORS 头，以告诉浏览器允许哪些请求。如果没有正确设置 CORS 头，浏览器会报错，导致无法正常进行数据交互。
解决方案
响应 OPTIONS 请求
为了解决 OPTIONS 请求无法响应的问题，我们需要在服务器中添加一个 OPTIONS 路由，并在该路由中正确响应 OPTIONS 请求。
-- -------------------- ---- -------
---------------
------- ----------
---- ----
-------- -------- --------- ------ -
-------------------------------------------- ------ ---- ---- ------- ---------
-------------------------------------------- ---------------
------------
-
--上面的代码中，我们添加了一个 OPTIONS 路由，并在该路由中设置了 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 头，以告诉浏览器服务器允许哪些请求。如果你想支持更多的请求方法和头部，可以在这里添加。
设置正确的 CORS 头
为了解决没有正确设置 CORS 头的问题，我们需要在 fastify-cors 插件中正确配置。
fastify.register(require('fastify-cors'), {
origin: true,
methods: ['GET', 'PUT', 'POST', 'DELETE'],
allowedHeaders: ['Content-Type']
})上面的代码中，我们在 fastify-cors 插件中设置了 methods 和 allowedHeaders，以告诉浏览器服务器允许哪些请求和头部。如果你想支持更多的请求方法和头部，可以在这里添加。
示例代码
以下是一个完整的示例代码，演示了如何在 Fastify 中启用 CORS，并正确响应 OPTIONS 请求和设置 CORS 头。
-- -------------------- ---- -------
----- ------- - --------------------
----------------------------------------- -
------- -----
-------- ------- ------ ------- ----------
--------------- ----------------
--
---------------
------- ----------
---- ----
-------- -------- --------- ------ -
-------------------------------------------- ------ ---- ---- ------- ---------
-------------------------------------------- ---------------
------------
-
--
---------------- -------- --------- ------ -
------------ ------ ------- --
--
-------------------- ----- -------- -- -
-- ----- ----- ---
------------------- --------- -- ------------
--总结
在本文中，我们介绍了 Fastify 中启用 CORS 后可能出现的问题，并提供了解决方案。通过正确响应 OPTIONS 请求和设置正确的 CORS 头，我们可以轻松解决跨域问题，使前端应用能够正常进行数据交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c581cbadd4f0e0ff00c58a