如何用jQuery获取随机维基百科页面标题？解决CORS重定向问题

这个问题我之前处理过，核心卡点其实是浏览器的同源策略（CORS）——不仅直接跨域请求维基页面会被拦截，而且跨域情况下浏览器不会让你读取重定向响应里的Location头，所以你没法直接拿到跳转后的URL。给你两个靠谱的解决方案：

方案一：使用维基百科官方API（推荐） #

维基百科提供了完善的开放API，不仅支持跨域请求，还能直接获取随机文章的标题、URL甚至页面内容，完全不需要处理重定向问题。这是最合规、最稳定的方式。

代码示例（获取随机标题并渲染） #

// 调用维基API获取随机文章的核心信息
$.getJSON('https://en.wikipedia.org/w/api.php', {
  action: 'query',
  generator: 'random', // 生成随机文章
  grnnamespace: 0, // 只获取主内容区的文章（排除讨论页、用户页等）
  grnlimit: 1, // 只返回1篇随机文章
  prop: 'info', // 获取页面基础信息
  inprop: 'url', // 包含文章的完整URL
  format: 'json',
  origin: '*' // 关键参数：允许跨域请求，维基API原生支持
})
.done(function(data) {
  // 解析返回的数据，API返回的页面对象存储在query.pages中（键是随机页面ID）
  const pages = data.query.pages;
  for (const pageId in pages) {
    const targetPage = pages[pageId];
    const articleTitle = targetPage.title;
    const articleUrl = targetPage.fullurl;
    
    console.log('随机文章标题:', articleTitle);
    console.log('文章完整URL:', articleUrl);
    
    // 直接将标题渲染到页面（如果需要保留原需求中的<i>标签，继续往下看）
    $(".wikiResult h3").text(articleTitle);

    // 如果你想获取原页面中#firstHeading下的<i>标签内容，可以再调用parse接口
    $.getJSON('https://en.wikipedia.org/w/api.php', {
      action: 'parse',
      pageid: pageId, // 用刚才拿到的页面ID定位文章
      prop: 'text',
      section: 0, // 只获取页面开头部分
      format: 'json',
      origin: '*'
    })
    .done(function(parseData) {
      // 从返回的HTML中提取目标元素
      const pageHtml = parseData.parse.text['*'];
      const $italicTitle = $(pageHtml).find('#firstHeading i');
      $(".wikiResult h3").html($italicTitle);
    });
  }
})
.fail(function(error) {
  console.error('请求出错:', error);
});

方案二：搭建后端代理（适合必须抓取页面原始内容的场景） #

如果你的需求必须依赖维基页面的原始HTML结构，那可以搭建一个简单的后端代理：前端请求自己的后端接口，后端去请求维基的Special:Random并处理重定向，最后把数据返回给前端——这样就能绕开浏览器的CORS限制。

示例后端代码（Node.js + Express） #

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

// 定义代理接口
app.get('/get-wiki-random', async (req, res) => {
  try {
    // 跟随重定向，获取最终的文章页面
    const response = await axios.get('https://en.wikipedia.org/wiki/Special:Random', {
      maxRedirects: 5 // 允许最多5次重定向
    });
    // 用正则提取页面标题（或用cheerio库解析HTML更可靠）
    const titleMatch = response.data.match(/<h1 id="firstHeading" class="firstHeading mw-first-heading">(.*?)<\/h1>/);
    const articleTitle = titleMatch ? titleMatch[1] : '获取标题失败';
    // 返回标题和最终URL
    res.json({
      title: articleTitle,
      finalUrl: response.request.res.responseUrl
    });
  } catch (err) {
    res.status(500).json({ error: '请求维基百科失败: ' + err.message });
  }
});

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

前端调用代理接口 #

$.get('http://localhost:3000/get-wiki-random')
.done(function(data) {
  $(".wikiResult h3").html(data.title);
  console.log('重定向后的最终URL:', data.finalUrl);
})
.fail(function(error) {
  console.error('请求代理出错:', error);
});

为什么原方法行不通？ #

1. CORS限制：维基百科的普通页面没有配置Access-Control-Allow-Origin响应头，浏览器会直接拦截跨域请求，这是你遇到的直接报错原因。
2. 重定向信息无法读取：即使请求能触发重定向，跨域情况下浏览器会隐藏响应中的Location头信息，前端JS根本拿不到跳转后的URL。

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