使用jQuery通过URL获取指定网页元素内容失败，求解决方法

你的代码无法运行的核心原因是浏览器同源策略限制：浏览器禁止前端JavaScript直接向不同域名的服务器发起AJAX请求（你的页面域名和目标博客域名不同），直接请求会被浏览器拦截，打开浏览器控制台就能看到CORS相关的错误提示。

另外需要注意：目标页面的#etawrap元素内容可能是通过JavaScript动态渲染的，如果是这种情况，即使解决跨域问题，静态解析HTML也无法获取到实际内容。

解决步骤 #

1. 采用后端代理（推荐方案）

后端服务不受浏览器同源策略限制，可以先让后端请求目标页面，解析出需要的内容后，再返回给前端。以下是Node.js + Express的实现示例：

后端代理代码：

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const app = express();

// 开发环境允许跨域请求（生产环境需配置具体可信域名）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// 定义接口用于获取目标元素内容
app.get('/get-eta-content', async (req, res) => {
  try {
    const targetUrl = 'https://tailwindbt.blogspot.com/2023/05/perfect-fried-rice-plate-is-really.html';
    // 后端请求目标页面
    const response = await axios.get(targetUrl);
    // 解析HTML结构
    const $ = cheerio.load(response.data);
    // 提取目标元素的文本内容
    const etaContent = $('#etawrap').text().trim();
    res.send(etaContent);
  } catch (error) {
    console.error(error);
    res.status(500).send('获取内容失败');
  }
});

// 启动服务
app.listen(3000, () => {
  console.log('代理服务运行在 http://localhost:3000');
});

前端代码修改：
将原来直接请求目标URL的代码，改为请求自己的后端接口：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="my-div"></div>

<script>
  // 请求后端代理接口
  $.get('http://localhost:3000/get-eta-content', function(data) {
    $(".my-div").html(data);
  }).fail(function() {
    $(".my-div").text('无法获取目标内容');
  });
</script>

2. 处理动态渲染内容（如果需要）

如果目标页面的#etawrap内容是通过JavaScript动态生成的，静态解析HTML会无法获取到内容，这时候需要用无头浏览器（如Puppeteer）在后端渲染完整页面后再抓取：

Puppeteer示例代码：

const express = require('express');
const puppeteer = require('puppeteer');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/get-eta-content', async (req, res) => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    // 等待页面加载完成（包括动态资源）
    await page.goto('https://tailwindbt.blogspot.com/2023/05/perfect-fried-rice-plate-is-really.html', { waitUntil: 'networkidle2' });
    // 等待目标元素渲染完成
    await page.waitForSelector('#etawrap');
    // 提取元素文本内容
    const etaContent = await page.$eval('#etawrap', el => el.textContent.trim());
    await browser.close();
    res.send(etaContent);
  } catch (error) {
    console.error(error);
    res.status(500).send('获取内容失败');
  }
});

app.listen(3000, () => {
  console.log('代理服务运行在 http://localhost:3000');
});

验证方法 #

1. 运行后端代理服务
2. 打开前端页面，查看my-div是否显示目标元素内容
3. 如果仍有问题，检查浏览器控制台的错误信息，排查是否有请求失败或元素未找到的情况

内容的提问来源于stack exchange，提问作者Its Md Ibrahim