跨域问题是 Web 开发中必不可少的一个话题，当我们的前后端分离时，由于浏览器的同源策略限制，前端不能直接访问其他域下的接口资源。通常情况下，我们的前端会使用 AJAX 或 Fetch 等方式来调用后端的接口，这时就需要解决跨域问题。
Fastify 是 Node.js 的一个快速和低开销的 Web 框架，它支持插件式的开发模式，可以灵活地扩展其功能。本文将介绍如何在 Fastify 中解决跨域问题。
跨域问题的原因
在介绍解决跨域问题的方法之前，我们需要了解一下跨域问题的产生原因。跨域问题发生的原因是浏览器的同源策略（Same-Origin Policy）限制。同源指协议、域名和端口号都相同，只有当请求和响应的协议、域名和端口都相同的时候，浏览器才会认为它们来自同一源。
跨域问题是浏览器为了防止跨站点脚本攻击而采取的安全策略。如果浏览器没有同源限制，那么攻击者就可以伪造请求，盗取用户的数据，引发各种安全问题。
解决跨域问题的方法
1. 使用 CORS
CORS（Cross-Origin Resource Sharing）是一种机制，它允许浏览器向跨域服务器发出请求，从而打破了同源限制。CORS 的基本思想是：要让客户端发送跨域请求，服务器端需要在响应头中添加如下内容：
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER Access-Control-Max-Age: 86400
Access-Control-Allow-Origin：允许访问的来源。可以是*，表示允许所有来源访问；也可以是具体的域名，表示只允许该域名访问。Access-Control-Allow-Methods：允许访问的方法。多个方法之间以逗号分隔。常用的有POST、GET、OPTIONS等。Access-Control-Allow-Headers：允许访问的头部信息。多个头部之间以逗号分隔。常用的有Content-Type、Origin、Authorization等。Access-Control-Max-Age：响应缓存时间。单位是秒，表示在指定时间内不需要再次发送预检请求。
在 Fastify 中实现 CORS 可以使用 fastify-cors 插件。
-- -------------------- ---- ------- ----- ------- - -------------------- ----- ---- - ----------------------- ---------------------- ---------------- -------- ----- ------ - ------------ ------ ------- -- -- -------------------- -------- ----- -------- - -- ----- - ------------------ --------------- - ------------------- --------- -- ------------ --展开代码
2. JSONP
JSONP（JSON with Padding）是一种解决跨域问题的方式，它利用了 HTML 中 script 标签可以跨域加载资源的特点。JSONP 的原理是通过在 HTML 页面中动态添加一个 script 标签，该标签的 src 属性指向服务端的接口，服务端以 JSON 格式返回数据，并包装在一个函数调用中，这个函数通过 callback 参数指定。
JSONP 的优点是兼容性好，可以兼容绝大部分浏览器，缺点是只支持 GET 方法，无法获取完整的 HTTP 响应。
在 Fastify 中实现 JSONP 可以使用以下代码：
-- -------------------- ---- ------- ----- ------- - -------------------- --------------------- -------- ----- ------ - ----- ---- - -------------- ----- -------- - ------------------ ----------------------------- ------------------------- ------ --------- ---- -- -------------------- -------- ----- -------- - -- ----- - ------------------ --------------- - ------------------- --------- -- ------------ --展开代码
3. 代理
代理是一种常用的解决跨域问题的方式，它的原理是通过前端向同域名下的服务器发送请求，然后由服务器转发请求到目标接口，最后将响应结果返回给前端。这样前端就可以克服跨域问题，通过代理访问跨域接口了。
在 Fastify 中实现代理可以使用以下代码：
-- -------------------- ---- ------- ----- ------- - -------------------- ----- ----- - --------------------- --------------------- ----- -------- ----- ------ - ----- --- - ------------- ----- -------- - ----- ---------- ----- ------ - ----- --------------- ------------------ -- -------------------- -------- ----- -------- - -- ----- - ------------------ --------------- - ------------------- --------- -- ------------ --展开代码
总结
通过本文的介绍，我们了解了跨域问题的产生原因及解决方案，分别是使用 CORS、JSONP 和代理。在实际开发中，我们根据具体的场景选择合适的解决方案。Fastify 插件丰富，可以方便地解决跨域问题，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64574a32968c7c53b0a0ea06
