FCC维基百科查看器无法获取MediaWiki API数据，请求技术协助

看起来你遇到了前端调用MediaWiki API时的**跨域资源共享（CORS）**限制问题，这在FreeCodeCamp的维基百科查看器挑战里是很常见的坑，我来帮你梳理解决方案：

问题根源 #

浏览器的同源策略会阻止前端脚本从一个域名直接请求另一个域名的资源，而你调用的维基百科API域名和你的CodePen页面域名不同，所以触发了这个限制，导致Firefox报错加载失败。

可行解决方案 #

方案1：使用JSONP绕过CORS限制 #

MediaWiki API原生支持JSONP格式，你可以通过添加callback参数来实现跨域请求，这也是早期处理跨域的常用方法，示例代码如下：

// 替换成你的搜索关键词
const searchTerm = "your-search-query";
const apiUrl = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${searchTerm}&format=json&callback=?`;

// 用jQuery的getJSON处理JSONP请求
$.getJSON(apiUrl, function(response) {
  console.log("获取到的数据：", response);
});

方案2：启用CORS支持（推荐） #

MediaWiki 1.28及以上版本支持CORS，你只需要在请求URL中添加origin=*参数，让服务器允许任何来源的跨域请求，示例代码（用原生fetch）：

const searchTerm = "your-search-query";
const apiUrl = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${searchTerm}&format=json&origin=*`;

fetch(apiUrl)
  .then(res => res.json())
  .then(data => console.log("获取到的数据：", data))
  .catch(err => console.error("请求出错：", err));

这个方案更符合现代前端的请求规范，推荐使用。

额外调试建议 #

• 打开浏览器开发者工具的网络标签，查看请求的状态码和响应头：如果是CORS相关错误，会在控制台明确提示；如果是400错误，说明你的API参数有拼写错误。
• 确保请求参数完整：MediaWiki API需要指定action、format等必填参数，比如你要搜索内容的话，list=search和srsearch参数也不能少。

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