javascript - 带有 Javascript 的维基百科 API 的访问控制允许来源

Question

尝试从 Codepen 上的维基百科 API 接收响应。回复应该是一个我正在尝试控制台的 json.log。

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

跨源请求被阻止:同源策略不允许读取位于 https://en.wikipedia.org/w/api.php?action=opensearch&search=earth&format=json 的远程资源. (原因:缺少 CORS header “Access-Control-Allow-Origin”)。

在过去的几天里，我阅读了很多关于 CORS 和 Allow-Origin 的文章，试图理解，但出于某种原因，即使我认为我理解了......我也无法实现:)

然而，最有趣的是这一点 - 即使控制台显示这样的错误消息，如果我在开发人员工具网络选项卡中查看实际响应，我也看到了 json 响应!

最好能解释一下这怎么可能？

Codepen 链接 here

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=* 添加到您使用的维基百科 URL 的查询参数中，请求将起作用。

要使对维基百科 API 的 JavaScript Fetch/XHR 请求有效，您必须在 URL 查询参数中包含 origin=*——根据 the CORS-related docs for the Wikipedia backend :

For anonymous requests, origin query string parameter can be set to * which will allow requests from anywhere.

所以问题中的URL应该是这样的:

"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 输出似乎是默认设置。)