什么是 CORS
CORS（Cross-Origin Resource Sharing）跨域资源共享，是为了安全地进行跨域数据传输而设计的一种网络标准。在浏览器端，当一个 Web 应用向另一个域名的资源发起请求时，如果两者的协议、域名或端口不相同，就会触发 CORS 机制。浏览器会向服务器发送一个 OPTIONS 请求，询问服务器是否允许当前域名访问该资源。如果服务器允许，浏览器才会发送真正的请求。
Fastify 框架中的 CORS 问题
Fastify 是一款快速、低开销的 Web 框架，它提供了一系列的插件，支持 HTTP/2、WebSockets 等常用的 Web 技术。在使用 Fastify 构建 Web 应用时，可能会遇到 CORS 问题。这是因为 Fastify 默认情况下不支持跨域访问，需要手动添加 CORS 插件才能解决这个问题。如果没有添加 CORS 插件，浏览器会报错，拒绝访问跨域资源。错误信息如下：
------ -- -------------- -- -------------------- ---- ------ ----------------------- --- ---- ------- -- ---- ------- -- ----------------------------- ------ -- ------- -- --- --------- ---------
解决方案
添加 Fastify-CORS 插件，可以解决 Fastify 框架中的 CORS 问题。Fastify-CORS 插件是 Fastify 官方提供的一个插件，它可以自动设置 CORS 头部，支持跨域访问。
安装 Fastify-CORS
使用 npm 安装 Fastify-CORS：
--- ------- ------------
添加 Fastify-CORS 插件
在 Fastify 应用中添加 Fastify-CORS 插件：
----- ------- - --------------------
----- ---- - -----------------------
----------------------
---------------- --------- ------ -- -
------------ -------- ------- ------- --
--
-------------------- ----- -------- -- -
-- ----- -
------------------
---------------
-
------------------- -- --------- -- ------------
--配置 Fastify-CORS
Fastify-CORS 插件支持传递一个配置对象，用来设置 CORS 头部的参数。以下是一些常用的配置参数：
- origin：允许访问的源地址，可以是字符串或数组。如果是字符串，则表示一个具体的源地址；如果是数组，则表示多个源地址。默认为
*，表示允许所有源地址访问。 - methods：允许使用的 HTTP 方法，可以是字符串或数组。如果是字符串，则表示一个具体的 HTTP 方法；如果是数组，则表示多个 HTTP 方法。默认为
GET,HEAD,PUT,PATCH,POST,DELETE，表示允许所有 HTTP 方法访问。 - allowedHeaders：允许使用的请求头，可以是字符串或数组。如果是字符串，则表示一个具体的请求头；如果是数组，则表示多个请求头。默认为
Content-Type,Authorization，表示允许使用这两个请求头。 - exposedHeaders：允许暴露的响应头，可以是字符串或数组。如果是字符串，则表示一个具体的响应头；如果是数组，则表示多个响应头。默认为空数组，表示不允许暴露任何响应头。
- credentials：是否允许发送 Cookie。默认为
false，表示不允许发送 Cookie。 - maxAge：预检请求缓存时间（单位为秒）。默认为
86400，表示缓存一天。
以下是一个配置示例：
----- ------- - --------------------
----- ---- - -----------------------
---------------------- -
------- ------------------------- -------------------------
-------- ------- ------- -------
--------------- ---------------- -----------------
--------------- ------------------------
------------ -----
------- -----
--
---------------- --------- ------ -- -
------------ -------- ------- ------- --
--
-------------------- ----- -------- -- -
-- ----- -
------------------
---------------
-
------------------- -- --------- -- ------------
--总结
Fastify-CORS 插件是 Fastify 官方提供的一个插件，可以自动设置 CORS 头部，支持跨域访问。在使用 Fastify 构建 Web 应用时，如果遇到 CORS 问题，可以使用 Fastify-CORS 插件解决。通过本文的介绍，读者可以了解到 Fastify-CORS 插件的安装、使用和配置方法，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fbd0a2d10417a222761236