无法从URL仓库提取完整数据仅能获取标题的技术求助

核心原因分析 #

1. 跨域请求限制与no-cors模式的副作用
   你使用了mode: "no-cors"发起请求，这会导致浏览器返回不透明响应（Opaque Response），无法读取响应的HTML内容。response.text()实际获取不到目标网站的真实页面代码，DOMParser解析出来的是空文档，自然无法提取论文的作者、摘要等信息。

2. DOM选择器可能失效
   即使解决跨域问题，原代码中依赖的DOM类名（如NCBI的.rprt、bioRxiv的.search-result-item）可能因网站更新而变更，导致元素匹配失败。

解决方案 #

1. 搭建后端代理（必做） #

前端无法直接绕过浏览器的CORS限制，必须通过后端服务器转发请求。以下是Node.js/Express的代理示例：

// 后端代理代码（Node.js）
const express = require('express');
const axios = require('axios');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.urlencoded({ extended: true }));

app.get('/proxy', async (req, res) => {
  try {
    const targetUrl = decodeURIComponent(req.query.url);
    const { data } = await axios.get(targetUrl);
    res.send(data);
  } catch (err) {
    res.status(500).send('请求失败');
  }
});

app.listen(3001, () => console.log('代理服务运行在3001端口'));

2. 修改前端fetch逻辑 #

去掉mode: "no-cors"，改用代理地址请求：

// 替换原fetch代码块
try {
  // 使用代理转发请求
  const proxyUrl = `http://localhost:3001/proxy?url=${encodeURIComponent(repo.url)}`;
  const response = await fetch(proxyUrl);
  
  if (!response.ok) throw new Error('请求失败');
  
  const parser = new DOMParser();
  const doc = parser.parseFromString(await response.text(), "text/html");
  
  // 后续解析逻辑保持，需验证选择器有效性
  // ...
} catch (error) {
  console.error(`获取${repo.title}数据失败:`, error);
  repoDiv.innerHTML += "<p>获取数据时发生错误</p>";
}

3. 验证并更新DOM选择器 #

打开目标网站的搜索结果页，用浏览器开发者工具检查实际DOM结构，更新代码中的选择器：

• 例如NCBI PMC当前搜索结果项的类名可能是result-item而非.rprt；
• bioRxiv的作者信息可能放在了新的容器类中，需要重新定位。

4. 优先使用官方API（更稳定） #

爬取HTML容易受网站结构变更影响，建议使用平台提供的官方API：

• NCBI PMC：使用Entrez eUtils API获取结构化数据；
• bioRxiv/medRxiv：使用官方API直接请求论文元数据；
• PDF搜索：可使用自定义搜索API替代网页爬取。

修改后的前端完整代码示例 #

document
  .getElementById("search-form")
  .addEventListener("submit", async(event) => {
    event.preventDefault();
    const searchInput = document.getElementById("search-input");
    const searchResults = document.getElementById("search-results");
    const query = searchInput.value.trim();

    if (!query) return;
    searchResults.innerHTML = "";

    const repos = [{
        url: `https://www.ncbi.nlm.nih.gov/pmc/?term=${query}`,
        title: "NCBI PMC",
      },
      {
        url: `https://www.biorxiv.org/search/${query}`,
        title: "bioRxiv",
      },
      {
        url: `https://www.medrxiv.org/search/${query}`,
        title: "medRxiv",
      },
      {
        url: `https://www.google.com/search?q=${query}+filetype:pdf`,
        title: "PDF Search",
      },
    ];

    repos.forEach(async(repo) => {
      const repoDiv = document.createElement("div");
      repoDiv.className = "repository";
      repoDiv.innerHTML = `<h3>${repo.title}</h3>`;
      searchResults.appendChild(repoDiv);

      try {
        const proxyUrl = `http://localhost:3001/proxy?url=${encodeURIComponent(repo.url)}`;
        const response = await fetch(proxyUrl);
        
        if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);

        const parser = new DOMParser();
        const doc = parser.parseFromString(await response.text(), "text/html");

        // NCBI PMC解析逻辑（需根据实际DOM更新选择器）
        if (repo.title === "NCBI PMC") {
          const paperItems = doc.querySelectorAll(".result-item"); // 示例更新后的选择器
          const topPaperItems = Array.from(paperItems).slice(0, 15);

          if (!topPaperItems.length) {
            repoDiv.innerHTML += "<p>未找到结果</p>";
            return;
          }

          topPaperItems.forEach((paperItem) => {
            const paperDiv = document.createElement("div");
            paperDiv.className = "paper";
            
            // 需根据实际DOM调整选择器
            const titleEl = paperItem.querySelector(".title a");
            const title = titleEl ? titleEl.innerText : "无标题";
            const authorsEl = paperItem.querySelector(".authors");
            const authors = authorsEl ? authorsEl.innerText : "未知作者";
            const summaryEl = paperItem.querySelector(".snippet");
            const summary = summaryEl ? summaryEl.innerText : "无摘要";

            paperDiv.innerHTML = `
              <h4>${title.toLowerCase() === query.toLowerCase() ? `<mark>${title}</mark>` : title}</h4>
              <p>作者: ${authors}</p>
              <p>${summary}</p>
            `;
            repoDiv.appendChild(paperDiv);
          });
        }

        // 其他仓库解析逻辑同理更新选择器
        // ...

      } catch (error) {
        console.error(`获取${repo.title}数据失败:`, error);
        repoDiv.innerHTML += "<p>获取数据时发生错误</p>";
      }
    });
  });

<form id="search-form">
  <input type="text" id="search-input" placeholder="输入搜索关键词">
  <button type="submit">搜索</button>
</form>
<div id="search-results"></div>

内容的提问来源于stack exchange，提问作者Nodir Kosimkhujaev