什么是 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)中,切换到项目所在的文件夹,然后执行如下命令:
npm install fastify-cors --save
引入 fastify-cors 插件
在你的 Fastify 项目的入口文件中,你可以像下面这样引入 fastify-cors 插件:
const fastify = require('fastify')(); fastify.register(require('fastify-cors'), { origin: true, credentials: true });
在上面的代码中,我们引入 fastify-cors,并将其注册到 Fastify 实例。
origin 参数表示我们允许请求的 origin,可以设置为:
- true:表示允许所有 origin 的请求。
- false:表示禁止所有 origin 的请求。
- 字符串:表示允许某个特定的 origin 的请求。
credentials 参数的值为 true 时,表示客户端请求时要发送 cookie、HTTP 认证以及客户端 SSL 证书等信息。
示例代码
-- -------------------- ---- ------- ----- ------- - --------------------- ----------------------------------------- - ------- ----- ------------ ---- --- ---------------- --------- ------ -- - ------------ -------- ------ ------- --- --- -------------------- ----- -- - -- ----- - ------------------- ---------------- - ------------------- -- -- -- ------------------------ ---
上面的示例代码中,我们使用 Fastify 创建了一个简单的 HTTP 服务器,其中包含一个根路由 /。当我们在浏览器中访问 http://localhost:3000 时,服务端会返回如下 JSON 格式的响应:
{ "message": "hello world!" }
需要注意的是,如果你使用了 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