在前端应用中，经常需要进行跨域请求来获取数据，但是在使用 Fastify 开发时，可能会遇到跨域问题。本文将介绍在 Fastify 中遇到的跨域问题，以及解决的方法和示例代码。
跨域问题
跨域请求是指在一个域名下的网页向另一个域名下的后端发出请求。在同一个域名下的请求是可以直接发送的，但是在不同域名下的请求需要通过特殊的方法来发送。
Fastify 是一个快速的 web 框架，使用 node.js 开发。在 Fastify 中，如果在同一个域名下发出请求，是没有问题的。但是在不同域名下，例如前端应用部署在 http://localhost:8000，后端服务部署在 http://localhost:8080，此时发出的请求就会被拦截。
常见的跨域问题有以下几种情况：
- Origin not allowed：因为浏览器的安全策略，只有在服务端设置了特定的 HTTP 响应头，才允许跨域请求。如果服务端没有设置响应头，那么浏览器会拒绝请求。
- Preflight request not allowed：某些情况下，浏览器将会先发送一个 OPTIONS 请求，来确认服务端是否支持跨域请求。如果服务端没有设置对应的响应头，那么浏览器会拒绝请求。
- CORS error：当客户端发出跨域请求时，后端返回的响应头没有设置跨域相关规则，那么客户端就会收到错误信息。
解决方案
针对上述跨域问题，我们可以使用以下方法解决：
- 设置响应头，允许跨域请求
在 Fastify 中，我们可以使用 fastify-cors 插件来设置响应头，示例如下：
const fastify = require('fastify')()
fastify.register(require('fastify-cors'), {
origin: '*',
methods: ['GET', 'POST'],
allowedHeaders: ['Content-Type']
})在上面的代码中，我们设置了允许所有来源的请求 origin: '*'，并且只允许 GET 和 POST 请求。同时，我们设置了允许特定的请求头。你可以根据实际情况来修改。
- 支持 options 请求
如果还是出现跨域问题，可能是因为服务端没有支持 OPTIONS 请求。我们需要在服务端添加对应的路由来支持 OPTIONS 请求，示例如下：
fastify.options('*', (req, reply) => {
reply.header('Access-Control-Allow-Origin', '*').send()
})在上面的代码中，我们在服务端添加了 OPTIONS 请求路由，并设置对应的响应头。这样，当客户端发送了OPTIONS 请求时，服务端就会返回对应的响应头，从而完成了跨域请求。
- 处理错误信息
在应用中出现跨域错误时，不应该返回一个空的响应或者一个错误信息。而是应该在服务端返回一个带有错误信息的响应。如下所示：
// 处理错误信息
fastify.setErrorHandler(function (error, request, reply) {
reply.code(400).send({
status: 'ERROR',
message: error.message
})
})在上述代码中，我们使用 Fastify 的 setErrorHandle 方法，对出现的错误信息进行处理，然后返回一个带有错误信息的响应。这样，客户端才能正确处理错误信息。
总结
通过本文的讲解，我们了解了 Fastify 框架中的跨域问题以及解决方案。在实际开发中，我们需要根据实际情况，选择合适的方法来解决跨域问题。
完整示例代码如下：
-- -------------------- ---- -------
----- ------- - --------------------
----------------------------------------- -
------- ----
-------- ------- --------
--------------- ----------------
--
-------------------- ----- ------ -- -
----- ---- - -
----- ----- -----
---- --
-
----------------
--
-------------------- ----- ------ -- -
------------------------------------------- -----------
--
-------------------------------- ------- -------- ------ -
----------------------
------- --------
-------- -------------
--
--
-------------------- ----- -------- -- -
-- ----- -
------------------
---------------
-
------------------- --------- -- ------------
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa765f48841e9894699e8a