未获取到维基百科-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

问题不在你的代码中，而是在 CORS 中，基本上由于同源策略，你不能进行调用。

更改这 2 个常量

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 之前添加了 crossorigin url，因为它 'overrides' CORS 并使您能够在同源策略之外进行调用。您还应该修改您的提交功能：

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

Answer 2

问题是因为您在 API 文档

中遗漏了一个关键细节

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

Unauthenticated CORS requests may be made from any origin by setting the "origin" request parameter to "*". In this case MediaWiki will include the Access-Control-Allow-Credentials: false header in the response and will process the request as if logged out (in case credentials are somehow sent anyway).

所以我更新你的url如下

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代码中做错了

未获取到维基百科-api

fetch to Wikipedia-api is not being made

api

json

fetch

wikipedia-api

reactjs