解决 Fastify 框架中 CORS 跨域问题

背景

在前端开发中，跨域问题是一个常见的问题。如果你使用 Fastify 框架搭建后端服务，你可能会遇到 CORS 跨域问题。CORS（Cross-Origin Resource Sharing）是一种机制，它允许 Web 应用程序在浏览器中访问不属于其自身源的资源。但是，默认情况下，Fastify 不支持 CORS。本文将介绍如何解决 Fastify 框架中的 CORS 跨域问题。

解决方法

方法一：使用 fastify-cors 插件

Fastify 提供了 fastify-cors 插件来解决 CORS 跨域问题。该插件可以配置 CORS 头信息，从而允许跨域请求。以下是使用 fastify-cors 插件的示例代码：

// javascriptcn.com 代码示例
const fastify = require('fastify')()
const cors = require('fastify-cors')

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

fastify.get('/api', (request, reply) => {
  reply.send({ message: 'Hello, world!' })
})

fastify.listen(3000, (err, address) => {
  if (err) {
    console.error(err)
    process.exit(1)
  }
  console.log(`Server listening on ${address}`)
})

在上面的示例代码中，我们使用了 fastify-cors 插件，并将 origin 参数设置为 true，表示允许所有来源的跨域请求。你也可以通过设置 origin 参数为一个字符串或一个正则表达式，来限制允许的来源。

方法二：手动设置 CORS 头信息

如果你不想使用 fastify-cors 插件，你也可以手动设置 CORS 头信息。以下是手动设置 CORS 头信息的示例代码：

// javascriptcn.com 代码示例
const fastify = require('fastify')()

fastify.addHook('onRequest', (request, reply, done) => {
  reply.header('Access-Control-Allow-Origin', '*')
  reply.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
  reply.header('Access-Control-Allow-Headers', 'Content-Type')
  done()
})

fastify.get('/api', (request, reply) => {
  reply.send({ message: 'Hello, world!' })
})

fastify.listen(3000, (err, address) => {
  if (err) {
    console.error(err)
    process.exit(1)
  }
  console.log(`Server listening on ${address}`)
})

在上面的示例代码中，我们使用了 fastify 的 addHook 方法，在请求处理之前设置了 CORS 头信息。其中，Access-Control-Allow-Origin 头信息表示允许所有来源的跨域请求，Access-Control-Allow-Methods 头信息表示允许的 HTTP 方法，Access-Control-Allow-Headers 头信息表示允许的请求头。

总结

在本文中，我们介绍了两种解决 Fastify 框架中 CORS 跨域问题的方法。你可以选择使用 fastify-cors 插件，也可以手动设置 CORS 头信息。无论你选择哪种方法，都可以解决 Fastify 框架中的 CORS 跨域问题。希望本文对你有帮助！

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