无法获取数据，CORS 问题，试图用 JSONP 破解它，仍然无法正常工作

Question

我正在尝试从http://www.recipepuppy.com/api/?q=onion&p=1 获取数据。 （示例查询）

它在浏览器中工作，但我试图在我的 React 应用程序中获取它，我遇到了“No 'Access-Control-Allow-Origin' header is present on the requested resource 错误。

所以我改变了策略，现在我尝试使用 JSONP (https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp)。

但我不能让它工作。我一直收到这个错误。有人可以帮我解决我的问题吗？

错误：

Uncaught ReferenceError: jp0 is not defined 在 ?q=onion&p=1&callback=__jp0:1

我的代码：

import jsonp from 'jsonp'

export const FETCH_RECIPES = 'FETCH_RECIPE'
export const SHOW_INFO = 'SHOW_INFO'

export function fetchRecipes (searchTermToDOoooooooooo) {
  const request = jsonp('http://www.recipepuppy.com/api/?q=onion&p=1', null, function (err, data) {
    if (err) {
      console.error(err.message)
    } else {
      console.log(data)
    }
  })

  return (dispatch) => {
    /*
    request.then(({ data: data1 }) => {
      dispatch({ type: FETCH_RECIPES, payload: data1 })
    })
    */
  }

}

export function showInfo (info) {
  return {
    type: SHOW_INFO,
    payload: info
  }
}

该错误在开发工具中的表现：

Answer 1

您不能使用仅客户端代码，至少不能使用 JSONP+Axios（Axios doesn't (natively) support JSONP；“jsonp”库与 Axios 不同），因为它是您从中获取信息的服务器违反跨域规则。在这种情况下，它是没有为 Access-Control-Allow-Origin 标头设置的 Recipe Puppy。

正如@Pointy 所提到的，一种选择是使用服务器端代理。

然后您的流程将转移到：

1. 客户端调用服务器端代理获取信息。
2. 代理调用 Recipe Puppy 的 API 并根据需要翻译或传递信息。
3. 代理将该信息中继到客户端代码以进行进一步处理。

至于您目前转向 jsonp，似乎 jsonp 库由于某种原因没有正确导出 jp0。这可能是您的构建工具出错。您需要仔细检查您的设置，并确保您的构建工具选择了 jsonp 库并将其实际放入已编译的源代码中。