具有Wikipedia API和Javascript的Access-Control-Allow-Origin

Question

尝试从Codepen上的Wikipedia API接收响应。答复应该是我正在尝试console.log的json。

但是在控制台中，我看到一个错误：

跨域请求被阻止：“相同源策略”不允许在https://en.wikipedia.org/w/api.php?action=opensearch&search=earth&format=json上读取远程资源。（原因：CORS标头“ Access-Control-Allow-Origin”缺失）。

过去几天，我已经阅读了很多有关CORS和Allow-Origin的文章，试图理解，但是由于某些原因，即使我认为我理解...我也无法实现：)

但是，最有趣的是-即使控制台显示这样的错误消息，如果我在开发人员工具“网络”标签中查看实际响应，也能看到json响应的全部荣耀！

有一个解释怎么可能呢？

Codepen链接在这里

var xhrObject = new XMLHttpRequest();

xhrObject.onreadystatechange = function() {
  if (xhrObject.readyState === 4 && xhrObject.status === 200) {
      console.log(xhrObject.responseText); 
    }
};

xhrObject.open(
  "POST", "https://en.wikipedia.org/w/api.php?action=opensearch&search=earth&format=json", true
);
xhrObject.send();

提前致谢

Answer 1

将origin=*您正在使用的Wikipedia URL的查询参数添加到该请求参数中。

要使对Wikipedia API的JavaScript Fetch / XHR请求正常工作，您必须origin=*在Wikipedia后端的CORS相关文档中包含URL查询参数：

对于匿名请求，origin可以将查询字符串参数设置为*允许来自任何地方的请求。

因此，问题中的网址应如下所示：

"https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=earth&format=json"

…甚至是这样：

"https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=earth="

（也就是说，我认为您可以省略，format=json因为JSON输出似乎是默认的。）