维基百科 API 上的 CORS 错误

Question

我对如何在 react 中处理 wikipedia api 调用感到有些困惑。我一直遇到这个错误：

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

现在，我在提交表单时运行一个操作，表单获取表单输入值并将其插入到 Wikipedia api URL。我尝试过使用 JSONP，但我真的不想使用它，因为我听说它超级 hacky。

actions/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
  }

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

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

Answer 1

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

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

见the CORS-related docs for the Wikipedia backend:

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

就format参数而言，JSON输出是默认的，所以你不需要指定。

Answer 2

为了在不使用 JSONP 的情况下解决此问题，解决方案是使用代理服务器来接受您的请求，并将正确的 CORS 标头添加到响应中。作为起点，这将有助于作为参考：https://gist.github.com/pauloricardomg/7084524