未获取到 Wikipedia-api

Question

我正在使用 React 做来自 FCC 项目的维基百科查看器，我试图通过使用模板字符串将 searchQuery（来自我的州）传递给它来提出请求。像这样：

gettingArticle() {
  const { searchQuery, articlesList } = this.state;

  const API = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${searchQuery}&prop=info&inprop=url&utf8=&format=json`;

  const body = { method: 'GET', dataType: 'json'};

  const myRequest = new Request(API, body);
  fetch(myRequest)
    .then(response => response.json())
    .then(data => this.setState({ 
      articlesList: data, articles: true }));
  console.log( 'data fetched' + displayedArticles);
}

我不确定我是否必须提出这样的请求，这正是我在文档上看到的。我想发出请求，在收到数据后，我想遍历对象数组，并将我需要的每一个小东西放在它们对应的标签中的 div 中。这是我的完整代码：https://codepen.io/manAbl/pen/VxQQyJ?editors=0110

Answer 1

问题是因为您错过了 API 文档中的关键细节

https://www.mediawiki.org/wiki/API:Cross-site_requests

通过将“origin”请求参数设置为“*”，可以从任何来源发出未经身份验证的 CORS 请求。在这种情况下，MediaWiki 将在响应中包含 Access-Control-Allow-Credentials: false 标头，并将像注销一样处理请求（以防无论如何以某种方式发送凭据）。

所以我像下面这样更新你的网址

const API = `https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&srsearch=${searchQuery}&prop=info&inprop=url&utf8=&format=json`;

还有你的console.log放错地方了，所以我改到下面了

fetch(myRequest)
    .then(response => response.json())
    .then(data => {
    console.log( 'data fetched', data);

    this.setState({ 
      articlesList: data, articles: true })
                  });

下面是更新笔

https://codepen.io/anon/pen/BxMyxX?editors=0110

现在您可以看到API 调用有效

当然我没有检查为什么在调用成功后你有白条，但这可能是你在 React 代码中做的错误

Answer 2

问题不在于您的代码，而在于 CORS，基本上由于同源政策，您不允许拨打电话。

改变这两个常量

const API = `https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${searchQuery}&prop=info&inprop=url&utf8=&format=json`;

const body = { method: 'GET', dataType: 'json', mode: 'cors', cache: 'default'};

我在您的 API 之前添加了跨域 URL，因为它“覆盖”了 CORS 并使您能够在同源策略之外进行调用。您还应该修改您的提交功能：

handleSubmit(ev) {
   ev.preventDefault(); //This disables default form function (reload/redirect of website and loss of state)
   this.gettingArticle();
}