抓取网页图片css和js

基础概念

抓取网页图片、CSS和JS是指通过编程手段从网页中提取出图片文件、CSS样式表文件和JavaScript脚本文件的过程。这个过程通常涉及到网络请求、HTML解析和文件下载等技术。

类型

全量抓取：抓取网页上的所有资源，包括图片、CSS、JS等。
增量抓取：只抓取更新的资源，常用于监控网站变化。
特定资源抓取：只抓取特定的资源，如只抓取图片或CSS文件。

应用场景

搜索引擎：搜索引擎需要抓取网页资源来索引和展示网页内容。
数据挖掘：通过抓取网页资源，可以进行数据挖掘和分析。
网站镜像：创建网站的镜像，便于用户离线访问。
安全分析：通过抓取网页资源，可以进行安全漏洞扫描和分析。

遇到的问题及解决方法

问题1：跨域问题

原因：浏览器出于安全考虑，限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

解决方法：

使用CORS（跨域资源共享）：服务器端设置允许跨域请求。
使用代理服务器：通过代理服务器转发请求，绕过浏览器的跨域限制。

// 示例代码：使用Node.js和axios进行代理请求
const axios = require('axios');
const express = require('express');
const app = express();

app.use('/proxy', async (req, res) => {
  try {
    const response = await axios.get('https://example.com' + req.url);
    res.send(response.data);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

app.listen(3000, () => {
  console.log('Proxy server running on port 3000');
});

问题2：动态加载的资源

原因：有些资源是通过JavaScript动态加载的，直接抓取HTML无法获取这些资源。

解决方法：

使用无头浏览器（如Puppeteer）模拟浏览器行为，等待资源加载完成后再抓取。
分析网页的网络请求，找到动态加载资源的URL，直接请求这些URL。

// 示例代码：使用Puppeteer抓取动态加载的资源
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 等待资源加载完成
  await page.waitForSelector('img');

  // 抓取图片资源
  const images = await page.$$eval('img', imgs => imgs.map(img => img.src));

  console.log(images);

  await browser.close();
})();

问题3：反爬虫机制

原因：一些网站为了防止资源被抓取，会设置反爬虫机制。

解决方法：

设置合理的请求头，模拟正常用户访问。
使用代理IP轮换，避免单一IP频繁请求。
控制请求频率，避免短时间内大量请求。

// 示例代码：设置请求头和代理IP
const axios = require('axios');

const headers = {
  'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'
};

const proxy = 'http://your-proxy-server:port';

axios.get('https://example.com', { headers, proxy })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error.message);
  });