如何解决Fetch API调用Wikipedia API请求失败的问题？

嘿，这个问题我太熟了——你这是碰到浏览器的**跨域资源共享（CORS）**限制啦！

浏览器的同源策略会阻止前端脚本直接从不同域名的服务器拉取数据，虽然你直接在地址栏访问API链接能正常拿到结果，但通过Fetch发起请求时，浏览器会因为跨域规则拦截这个请求，导致进入catch分支显示失败。

好在MediaWiki API专门提供了解决方案，你只需要在请求URL里加上origin=*参数，它会告诉API服务器允许来自任何域名的跨域请求。

修改后的代码如下：

JavaScript代码 #

const text = document.getElementById('content');
fetch('https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srlimit=100&srsearch=apple&origin=*')
 .then(res => res.json())
 .then(json => text.innerHTML = 'Success!')
 .catch(err => text.innerHTML = 'Failure :(');

HTML代码 #

<div id="content"></div>

额外提一句：如果是正式上线的应用，你可以把origin=*换成你的具体域名（比如origin=https://yourdomain.com），这样能提升安全性；但在开发测试阶段，用*会更方便快捷。

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