解决 Fastify 构建的 Web 应用时出现跨域问题

什么是跨域问题？

跨域问题是指在浏览器中，当一个 Web 应用程序试图从一个不同的域名、端口或协议请求资源时，会被浏览器的同源策略所限制。这是因为浏览器出于安全考虑，限制了从脚本发起的跨域 HTTP 请求，以防止恶意网站窃取用户的信息。

Fastify 构建的 Web 应用时出现跨域问题

Fastify 是一个快速、低开销、可扩展的 Node.js Web 框架，它可以帮助我们快速构建高性能的 Web 应用程序。但是，当我们使用 Fastify 构建 Web 应用程序时，可能会遇到跨域问题。这是因为默认情况下，Fastify 的路由处理程序是不允许跨域请求的。

解决跨域问题的方法

1. 使用 fastify-cors 插件

Fastify 提供了 fastify-cors 插件，它可以帮助我们轻松解决跨域问题。我们只需要在应用程序中注册 fastify-cors 插件，就可以允许跨域请求了。

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

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

fastify.get('/', (req, reply) => {
  reply.send({ message: 'Hello World!' })
})

fastify.listen(3000, (err) => {
  if (err) {
    console.error(err)
    process.exit(1)
  }
  console.log('Server listening on http://localhost:3000')
})

在上面的示例代码中，我们在应用程序中注册了 fastify-cors 插件，并将 origin 设置为 true，表示允许所有来源的跨域请求。如果您需要更精细的控制，可以设置 allowedHeaders、exposedHeaders、methods、credentials 等选项。

2. 手动设置 CORS 头

如果您不想使用 fastify-cors 插件，也可以手动设置 CORS 头。在 Fastify 的路由处理程序中，我们可以使用 reply.header() 方法来设置响应头。

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

fastify.get('/', (req, reply) => {
  reply
    .header('Access-Control-Allow-Origin', '*')
    .send({ message: 'Hello World!' })
})

fastify.listen(3000, (err) => {
  if (err) {
    console.error(err)
    process.exit(1)
  }
  console.log('Server listening on http://localhost:3000')
})

在上面的示例代码中，我们使用 reply.header() 方法手动设置了 Access-Control-Allow-Origin 头，允许所有来源的跨域请求。如果您需要更精细的控制，可以设置 Access-Control-Allow-Headers、Access-Control-Expose-Headers、Access-Control-Allow-Methods、Access-Control-Allow-Credentials 等头。

总结

在本文中，我们介绍了跨域问题的概念，并解决了使用 Fastify 构建的 Web 应用程序时出现的跨域问题。我们可以使用 fastify-cors 插件或手动设置 CORS 头来允许跨域请求。希望本文对您有所帮助，谢谢阅读！

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