解决 Fastify 中启用 CORS 后出现的问题

在开发前端应用时，经常需要和后端进行数据交互。由于浏览器的同源策略，如果前端应用和后端不在同一个域名下，会受到限制，导致无法正常进行数据交互。为了解决这个问题，我们可以在后端启用 CORS（跨域资源共享）。

Fastify 是一个高效的 Node.js Web 框架，它提供了一种简单的方式来启用 CORS。但是，在启用 CORS 后，我们可能会遇到一些问题。本文将介绍 Fastify 中启用 CORS 后出现的问题，并提供解决方案。

启用 CORS

在 Fastify 中启用 CORS 非常简单，只需要使用 fastify-cors 插件即可。安装 fastify-cors：

npm install fastify-cors

然后在 Fastify 应用中使用 fastify-cors 插件：

const fastify = require('fastify')()

fastify.register(require('fastify-cors'), {
  origin: true
})

fastify.listen(3000, (err, address) => {
  if (err) throw err
  console.log(`server listening on ${address}`)
})

上面的代码中，我们启用了 fastify-cors 插件，并将 origin 设置为 true，表示允许所有来源的请求。如果你只想允许特定的来源请求，可以将 origin 设置为一个字符串或正则表达式，或者一个返回这些值的函数。更多配置选项可以参考 fastify-cors 的文档。

出现的问题

在启用 CORS 后，我们可能会遇到以下问题：

OPTIONS 请求无法响应

由于浏览器的同源策略，当我们在前端应用中发起跨域请求时，浏览器会先发送一个 OPTIONS 请求，以确定服务器是否允许该请求。如果服务器允许该请求，浏览器才会发送真正的请求。

如果在启用 CORS 后，我们的服务器没有正确响应 OPTIONS 请求，浏览器会报错，导致真正的请求无法发送。

没有正确设置 CORS 头

在启用 CORS 后，我们需要在响应中设置 CORS 头，以告诉浏览器允许哪些请求。如果没有正确设置 CORS 头，浏览器会报错，导致无法正常进行数据交互。

解决方案

响应 OPTIONS 请求

为了解决 OPTIONS 请求无法响应的问题，我们需要在服务器中添加一个 OPTIONS 路由，并在该路由中正确响应 OPTIONS 请求。

fastify.route({
  method: 'OPTIONS',
  url: '*',
  handler: function (request, reply) {
    reply.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS')
    reply.header('Access-Control-Allow-Headers', 'content-type')
    reply.send()
  }
})

上面的代码中，我们添加了一个 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 头。

const fastify = require('fastify')()

fastify.register(require('fastify-cors'), {
  origin: true,
  methods: ['GET', 'PUT', 'POST', 'DELETE'],
  allowedHeaders: ['Content-Type']
})

fastify.route({
  method: 'OPTIONS',
  url: '*',
  handler: function (request, reply) {
    reply.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS')
    reply.header('Access-Control-Allow-Headers', 'content-type')
    reply.send()
  }
})

fastify.get('/', function (request, reply) {
  reply.send({ hello: 'world' })
})

fastify.listen(3000, (err, address) => {
  if (err) throw err
  console.log(`server listening on ${address}`)
})

总结

在本文中，我们介绍了 Fastify 中启用 CORS 后可能出现的问题，并提供了解决方案。通过正确响应 OPTIONS 请求和设置正确的 CORS 头，我们可以轻松解决跨域问题，使前端应用能够正常进行数据交互。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c581cbadd4f0e0ff00c58a