什么是防盗链？
防盗链是指通过一些措施，防止你的图片、视频等媒体资源被其他网站非法使用。
一般情况下，我们需要在服务端对 HTTP 请求头中的 Referer(来自哪个页面) 进行判断，如果请求头中的 Referer 值不是当前站点的域名，则可以认为是盗链行为。此时，我们可以通过服务端响应状态码或者返回一张仅包含「禁止盗链」图片的响应内容给请求者。
Next.js 中如何实现防盗链？
Next.js 作为一个流行的 React 框架，本身并没有集成防盗链的功能。但是，我们可以通过使用 node.js 中的 http 模块来完成防盗链的功能。下面，我们就来详细介绍一下如何在 Next.js 中实现防盗链的功能。
Step 1: 安装依赖包
为了实现防盗链的功能，我们需要安装一些依赖包。在 Next.js 项目的根目录下，执行以下命令：
--- - ---- --- -- ------
其中，http 模块是 Node.js 自带的一个模块，用于处理 HTTP 请求和响应。url 模块则是 Node.js 自带的一个模块，用于解析并处理 URL。fs 模块是 Node.js 中的一个模块，用于文件的读写。
Step 2: 编写中间件函数
在 Next.js 项目的根目录下，创建一个名为 preventHotlinking.js 的中间件函数，代码如下：
----- ---- - ----------------
----- --- - ---------------
----- -- - --------------
-------------- - ----- ---- ----- -- -
-- -------
----- --------- - ----------------------------
-- ---------
-- --------------------------------------------------- -
-- -- -------
----- ------- - ------------------- -- -------------------- -- ---
-- -----
----- - -------- - - ------------------ ------ ------
----- ----------- - -----------------
-- --------------------------------------
-- --------- -- ----------- -- -------- --- ------------ -
------------------ -
--------------- ------------------------
---
--------------------- - --------------------- ----- ----- -- -
-- ----- -
-----------------
-------
-
--------------
---
-------
-
-
-------
-上述代码首先通过 url.parse 函数获取图片的路径，然后正则表达式校验图片的扩展名是否符合标准。接着获取 referer(或者 referrer) 值，根据其值判断本次请求是否来自当前站点，如果来源不是本站点，则返回一个状态码为 HTTP 403 的响应。最后一个 no_hotlinking.jpg 是一个本地资源，表示防盗链的占位图片。
Step 3: 集成函数
在 Next.js 项目中，将编写的中间件函数作为 server 中 middleware 数组的一部分集成起来。在 Next.js 项目的根目录下，打开 server.js 文件（如果不存在则需要手动创建），并编写以下代码：
----- ------- - -------------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------ - ----------
----- ---- - ---------------- -- -----
----- --- - -------------------- --- -------------
----- --- - ------ --- ---
----- ------ - ------------------------
--------------------- -- -
------------------------------
--------------- ----- ---- -- -
------ ----------- -----
---
------------------- ----- -- -
-- ----- ----- ----
-------------- ----- -- ---------------------------
---
---上述代码中，我们使用 express 来创建服务器。在应用中间件之前，应用程序必须配置如下代码，以允许能够在 HTTP 请求中读取请求正文。
--------------------------- ------------------------------- --------- ---- ----
然后，我们将刚才编写的防盗链中间件作为 server 的中间件之一加入。server.all 函数就是为所有请求（*）指定回调函数，如果请求不符合路由，则使用 handle 处理器来处理。
Step 4: 正确设置 publicConfig
最后一步，打开 next.config.js，确保正确设置 publicConfig。
-------------- - -
------------- -
-------------------------- ----
-
--以上设置 publicConfig 的 blockingPreventHotlinking 属性为 true 即可实现 Next.js 集成防盗链功能的解决方案。
总结
本文详细介绍了如何在 Next.js 项目中实现防盗链功能。通过 node.js 中的 http 模块、url 模块、fs 模块等组成，以及中间件函数和 publicConfig 的配合使用，为 Next.js 提供了简单且实用的防盗链功能，通过本文的学习，可以让开发者更好地保护自己的网站资源的安全性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654cd7397d4982a6eb62b9fb