使用 Fastify-Cors 解决跨域问题

在 Web 开发中，跨域是一个经常遇到的问题。跨域是指在一个域名下的网页去访问另一个域名下的资源，会引发跨域问题。如果没有处理跨域请求，会导致浏览器抛出“同源策略限制”的错误，从而无法正常请求数据。

解决跨域问题的方法有很多，其中一种简单且易用的方法是使用 Fastify-Cors。

Fastify-Cors 概述

Fastify-Cors 是一个 Fastify 扩展，用于解决跨域请求问题。它基于 cors 插件，并提供了 Fastify 中间件的支持。它允许您轻松地允许跨域请求，同时提供了一些选项以供定制。

安装 Fastify-Cors

使用 npm 包管理器可以轻松安装 Fastify-Cors。在命令行中输入以下命令：

npm install fastify-cors

使用 Fastify-Cors

使用 Fastify-Cors 非常简单。只需在 Fastify 应用程序中注册插件即可。以下示例代码展示了如何在 Fastify 应用程序中使用 Fastify-Cors。

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

fastify.register(cors, {
  origin: '*',
  methods: 'GET,PUT,POST,DELETE',
  preflightContinue: false,
  optionsSuccessStatus: 204
});

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

在 Fastify-Cors 中定制选项

Fastify-Cors 提供了一些选项，以供根据您的要求进行自定义。下面是 Fastify-Cors 中的选项列表和其默认值。

// javascriptcn.com 代码示例
{
  origin: true,
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  allowedHeaders: '',
  exposedHeaders: '',
  credentials: false,
  maxAge: '',
  preflightContinue: false,
  optionsSuccessStatus: 204
}

在这个选项中，以下是每个选项的解释：

• origin: 允许跨域请求的源。可以是字符串、数组、函数（返回字符串或数组）或布尔值。默认值为 true。
• methods: 允许跨域请求的 HTTP 方法列表。默认值为 'GET,HEAD,PUT,PATCH,POST,DELETE'。
• allowedHeaders: 允许请求头的列表。默认值为空。
• exposedHeaders: 允许响应头的列表。默认值为空。
• credentials: 标识资源是否允许跨域请求 cookie、HTTP 认证等。默认值为 false。
• maxAge: 表示预检请求（OPTIONS）的有效期。默认值为空。
• preflightContinue: 标识是否在 Handle 阶段继续处理 OPTIONS 请求。
• optionsSuccessStatus: 标识响应 OPTIONS 请求的 HTTP 状态码。默认值为 204。

总结

Fastify-Cors 是一个快速且易用的跨域库。通过几行代码，我们就可以轻松解决跨域请求问题。如果您想要更深入地了解 Fastify-Cors，建议您查看官方文档，其中包含更多细节和选项，以供您定制。

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