未获取维基百科-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之前添加了crossorigin url，因为它“覆盖”了CORS并使您能够在同一原始策略之外进行调用。您还应修改提交功能：

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