维基百科 API 上的 CORS 错误

Question

我对如何在反应中处理维基百科 api 调用有点困惑。我一直遇到这个错误：

跨域请求被阻止：同源策略不允许读取远程资源（...）

现在，我正在提交表单时运行一个操作，该表单采用表单输入值并将其插入到维基百科 api URL 中。我曾尝试使用 JSONP，但我真的不想使用它，因为我听说它非常 hacky。

动作/ index.js

import axios from 'axios';

const WIKI_URL = "https://en.wikipedia.org/w/api.php?action=query&format=jsonp&list=search&titles=";
const FETCH_ARTICLES = 'FETCH_ARTICLES';

export function fetchArticles(term) {
  const url = `${WIKI_URL}${term}`;
  const request = axios.get(url);

  return {
    type: FETCH_ARTICLES,
    payload: request
  }

如有必要，我绝对可以添加更多代码，但据我所知，这就是问题所在。

编辑：如果我必须使用 JSONP，我仍然无法使用。我相信 axios 不支持 JSONP，有没有更好的库可以使用？为什么有些 API 会出现跨源引用错误，而另一些则不会？

Answer 1

删除format=jsonp并添加origin=*到 WIKI_URL 值中的查询参数：

const WIKI_URL = "https://en.wikipedia.org/w/api.php?origin=*&action=query…";

请参阅维基百科后端的 CORS 相关文档：

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

至于format参数，JSON 输出是默认值，所以我认为您不需要指定它。