jQuery 跨域獲取指定 URL 頁面中最大圖片的限制與方案

核心限制：同源策略

瀏覽器禁止 JavaScript 跨域讀取任意 URL 的 HTML 內容。若目標頁面未設置 Access-Control-Allow-Origin，AJAX 請求會被攔截。

可行方案對比

後端代理實現 (Node.js 示例)

// server.js
app.get('/api/fetch-largest-image', async (req, res) => {
    const { url } = req.query;
    const html = await fetch(url).then(r => r.text());
    const $ = cheerio.load(html);
    let maxArea = 0, maxSrc = '';
    $('img').each((i, el) => {
        const w = $(el).width() || 0;
        const h = $(el).height() || 0;
        if (w * h > maxArea) {
            maxArea = w * h;
            maxSrc = $(el).attr('src');
        }
    });
    res.json({ url: maxSrc });
});

前端調用

$.get('/api/fetch-largest-image', { url: targetUrl }, data => {
    console.log('最大圖片:', data.url);
});

結論

純前端 jQuery 無法 突破同源策略獲取任意 URL 內容，必須通過後端代理或合作方配置實現。