Fastify 中如何处理 CORS 预检请求

CORS（跨域资源共享）是一种机制，它允许网页从不同的域访问不同的资源。在 Web 开发中，常常需要允许跨域 AJAX 请求。当 AJAX 请求跨域时，浏览器会自动发出 CORS 预检请求，以确定是否允许该跨域请求。

在 Fastify 中，处理 CORS 预检请求可以通过 fastify-cors 插件来完成。fastify-cors 插件提供了一些选项，允许您定制 CORS 行为，包括允许的域，允许的方法和允许的头部信息。

安装 fastify-cors 插件

您可以使用 npm 在 Fastify 应用程序中安装 fastify-cors 插件：

npm install fastify-cors

配置 fastify-cors 插件

引入 fastify-cors 插件：

const fastify = require('fastify')()
const cors = require('fastify-cors')

在您的 Fastify 应用程序中注册 fastify-cors 插件：

fastify.register(cors, {
  // 选项
})

在选项中，您可以指定允许的域，允许的方法，允许的头部信息等。例如，以下选项允许来自 example.com 域的跨域请求，允许 GET 和 POST 方法，以及允许自定义头部信息 Auth-Token：

fastify.register(cors, {
  origin: 'http://example.com',
  methods: 'GET,POST',
  allowedHeaders: 'Auth-Token',
})

示例代码

以下是一个简单的 Fastify 应用程序，其中包含配置了 fastify-cors 插件的路由处理程序。

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

fastify.register(cors, {
  origin: '*',
  methods: 'GET,POST',
  allowedHeaders: 'Auth-Token',
})

fastify.route({
  method: 'OPTIONS',
  url: '/tasks/:id',
  handler: (request, reply) => {
    reply.send('CORS preflight request')
  },
})

fastify.route({
  method: 'GET',
  url: '/tasks/:id',
  handler: (request, reply) => {
    reply.send({
      id: request.params.id,
      name: 'Task #' + request.params.id,
    })
  },
})

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

在上面的代码中，我们首先通过 fastify.register 方法注册了 fastify-cors 插件，并配置了允许的域、方法和头部信息。随后，我们定义了两个路由处理程序。其中，OPTIONS /tasks/:id 路由处理程序用于处理 CORS 预检请求，返回一个简单的字符串，表示这是一个 CORS 预检请求。GET /tasks/:id 路由处理程序用于正常响应 AJAX 请求，返回一个 JSON 对象。

本文总结

本文介绍了如何使用 fastify-cors 插件在 Fastify 中处理 CORS 预检请求。您可以通过配置 fastify-cors 插件的选项来定制 CORS 行为，并通过示例代码了解一些常见的用法。在您开发 Web 应用程序时，如果需要处理跨域 AJAX 请求，快速使用 fastify-cors 插件可以极大地降低您的开发难度。

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