Fastify 中如何实现 CORS 跨域资源共享

阅读时长 4 分钟读完

什么是 CORS?

CORS 是 Cross-Origin Resource Sharing 的缩写,意为跨域资源共享。跨域指的是在浏览器端,发起一个 HTTP 请求时,该请求的目标资源并不在当前 origin(协议+域名+端口)所在的服务上,而是在另一个 origin 中。CORS 是一种机制,用于让浏览器允许跨域请求资源。

CORS 对于 Web 开发的意义

CORS 是因为同源策略(Same-Origin Policy)而诞生的。同源策略是浏览器的一项基本安全功能,用于限制来自不同源的脚本对当前页面的访问。同源策略对网站的安全和隐私有着非常重要的作用。但是,同源策略的限制也有时候会妨碍到开发者和用户的需求。比如,用户在浏览器端通过 Ajax 请求后端 API 时,这些 API 的目标并不总是在同一个 origin 中。为了解决这个问题,CORS 被引入了 Web 开发。

Fastify 中如何实现 CORS?

Fastify 是 Node.js 中一种快速、低开销、可扩展的 Web 框架。下面展示如何在 Fastify 中实现 CORS。

安装依赖

要使用 Fastify 实现 CORS,需要引入 fastify-cors 插件,它可以很方便地帮助你完成所有 CORS 相关的操作。在终端(Terminal)中,切换到项目所在的文件夹,然后执行如下命令:

引入 fastify-cors 插件

在你的 Fastify 项目的入口文件中,你可以像下面这样引入 fastify-cors 插件:

在上面的代码中,我们引入 fastify-cors,并将其注册到 Fastify 实例。

origin 参数表示我们允许请求的 origin,可以设置为:

  • true:表示允许所有 origin 的请求。
  • false:表示禁止所有 origin 的请求。
  • 字符串:表示允许某个特定的 origin 的请求。

credentials 参数的值为 true 时,表示客户端请求时要发送 cookie、HTTP 认证以及客户端 SSL 证书等信息。

示例代码

-- -------------------- ---- -------
----- ------- - ---------------------

----------------------------------------- -
  ------- -----
  ------------ ----
---

---------------- --------- ------ -- -
  ------------
    -------- ------ -------
  ---
---

-------------------- ----- -- -
  -- ----- -
    -------------------
    ----------------
  -
  ------------------- -- -- -- ------------------------
---

上面的示例代码中,我们使用 Fastify 创建了一个简单的 HTTP 服务器,其中包含一个根路由 /。当我们在浏览器中访问 http://localhost:3000 时,服务端会返回如下 JSON 格式的响应:

需要注意的是,如果你使用了 Fastify 的 reply.send() 方法,你的响应体一定要有明确的 content-type,否则客户端无法正确解析数据,这是由 reply 底层使用的 fast-json-stringify 模块来负责解析返回值的原因。

总结

CORS 是 Web 开发中不可或缺的重要功能,本文介绍了如何在 Fastify 中实现 CORS 来允许跨域访问。在 Fastify 中使用 fastify-cors 插件很容易实现 CORS,借助于本文的指导和示例代码,你能够使用 Fastify 快速搭建一个集成了 CORS 支持的 HTTP 服务器。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/645c7e5d968c7c53b0ee3aa7

纠错
反馈