企业网站设计规范,如何在手机上做app,wordpress 项目选项,WordPress动态二维码插件背景
设计人员分享了一个墨刀的原型图#xff0c;但是给的是只读权限#xff0c;无法下载其中的素材#xff1b;开发时想下载里面的一张动图#xff0c;通过浏览器的F12工具在页面结构找到了图片地址。 但是浏览器直接访问后发现没权限#xff1a; Nginx 的 403 页面。。…背景
设计人员分享了一个墨刀的原型图但是给的是只读权限无法下载其中的素材开发时想下载里面的一张动图通过浏览器的F12工具在页面结构找到了图片地址。 但是浏览器直接访问后发现没权限 Nginx 的 403 页面。。然后就想用其他方式下载这个图片。 失败的尝试通过浏览器请求另存为图片
从前面的403报错可以知道访问这个图片的链接应该需要带头信息那就先看下网络中的这个请求的头信息我这里用图片作为条件过滤了一下找见请求后右键有个另存为图片以为这就大功告成了但是保存后发现大小只有1M1024KB而从浏览器的请求中可以看到实际的文件大小差不多10M这很可能是浏览器哪里做了限制导致下载的图片不是原图或者不完整。 成功的尝试NodeJS发送Fetch请求
在开发者工具中的网络请求右键中还有一个选项在控制台中Fetch点击之后会在控制台中生成一段代码用于发送请求获取图片并且带了头信息。 看到这个代码我立即就联想到可以通过 Node.js 来发送请求然后下载保存图片说干就干以下是完整代码。
const fs require(fs);const downloadFile (async (url, path) {const res await fetch(https://modao.cc/x/y/z.gif, {credentials: include,headers: {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0,Accept: image/avif,image/webp,*/*,Accept-Language: zh-CN,zh;q0.8,zh-TW;q0.7,zh-HK;q0.5,en-US;q0.3,en;q0.2,Sec-Fetch-Dest: image,Sec-Fetch-Mode: no-cors,Sec-Fetch-Site: same-origin,Pragma: no-cache,Cache-Control: no-cache},referrer: https://modao.cc/abc/opqfromsharing,method: GET,mode: cors});fs.writeFile(path, Buffer.from(await res.arrayBuffer()), binary, function(err) {if (err) throw err;console.log(OK);});
});downloadFile(1, ./1.gif)以上代码主要用到了 Node.js 的 fetch 方法来发送资源请求以及 fs 模块来存储图片简单直接有效。
可能遇到的问题
不过通过上述方式并不能下载所有的素材有的图片下载返回了状态码 304 Not Modified 我们知道如果服务器返回状态码为 304 Not Modified 这意味着请求的资源在服务器上没有发生变化服务器告诉客户端可以使用缓存的版本。这是一种优化机制可以减少网络流量和提高性能。
当浏览器或其他客户端首次请求资源时服务器会返回资源的完整内容和一个响应头Response Header其中包含一个叫做ETag的字段。 ETag 是一个唯一标识符表示资源的版本。当客户端再次请求相同的资源时会在请求头Request Header中包含一个叫做If-None-Match的字段该字段的值就是上次请求返回的 ETag 值。
如果服务器收到了带有If-None-Match字段的请求并且发现资源的 ETag 值与请求头中的值相匹配服务器就会返回 304 Not Modified 状态码告诉客户端可以使用缓存的版本。这样可以节省带宽和服务器资源因为客户端可以直接从缓存中获取资源而不需要重新下载。
解决方法更新请求头部尝试在 fetch 请求中添加 Cache-Control: no-cache 头部这将告诉服务器不使用缓存版本强制返回实际的资源内容。或者直接去掉浏览器生成的头信息中的 If-Modified-Since 与 If-None-Match If-Modified-Since: Fri, 21 Jul 2023 07:05:31 GMT,If-None-Match:\64ba2e3b-14711\const fs require(fs);const downloadFile (async (url, path) {const res await fetch(https://modao.cc/x/y/z.png, {credentials: include,headers: {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0,Accept: image/avif,image/webp,*/*,Accept-Language: zh-CN,zh;q0.8,zh-TW;q0.7,zh-HK;q0.5,en-US;q0.3,en;q0.2,Sec-Fetch-Dest: image,Sec-Fetch-Mode: no-cors,Sec-Fetch-Site: same-origin,},referrer: https://modao.cc/abc/opqfromsharing,method: GET,mode: cors});fs.writeFile(path, Buffer.from(await res.arrayBuffer()), binary, function(err) {if (err) throw err;console.log(OK);});
});downloadFile(2, ./2.png)小总结
以上记录了使用 NodeJS 爬取墨刀上的设计图片的过程。 当使用 Node.js 的爬虫 fetch 请求时返回状态码 304 Not Modified 表示请求的资源在服务器上没有发生变化因此服务器不会返回实际的资源内容而是告诉客户端可以使用缓存的版本。 这种情况通常发生在客户端发送了一个带有 If-Modified-Since 或 If-None-Match 头部的请求这些头部包含了之前请求时服务器返回的资源的相关信息用于判断资源是否发生了变化。 要解决这个问题可以尝试在 fetch 请求中添加 Cache-Control: no-cache 头部这将告诉服务器不使用缓存版本强制返回实际的资源内容。
