调用Wikipedia API时触发NetworkError错误，请求排查原因

核心原因 #

你遇到的是浏览器同源策略导致的跨域请求限制——Postman这类工具不受浏览器同源规则约束，所以能正常请求，但前端页面直接调用第三方API时，浏览器会拦截请求并抛出NetworkError。

解决方案 #

维基百科API支持通过添加origin参数来允许跨域请求，直接修改参数配置即可：

修改后的代码 #

const searchQuery = async () => {
  const params = {
    action: "query",
    format: "json",
    list: "search",
    srsearch: "salvador dali",
    origin: "*" // 添加该参数，允许任意域名发起跨域请求
  };

  const url = new URL("https://en.wikipedia.org/w/api.php"); // 去掉URL末尾多余的斜杠

  for (let param in params) {
    url.searchParams.append(param, params[param]);
  }
  
  try {
    const searchData = await fetch(url);
    console.log(searchData);
    const data = await searchData.json();
    console.log(data);
  } catch (err) {
    console.error("请求失败:", err); // 增加错误捕获，方便后续调试
  }
};

额外说明 #

• origin: "*" 允许所有域名发起请求，如果你明确知道自身页面的域名，也可以替换成具体域名（比如https://your-site.com），安全性更高。
• 移除URL末尾的斜杠可避免URL解析时出现不必要的异常。
• 新增的try/catch块能帮你更直观地捕获、排查后续可能出现的请求问题。

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