无法获取数据，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）。

但我无法使其发挥作用。我一直都会收到这个错误。有人可以帮助我解决我的问题吗？

错误：

未捕获的ReferenceError：未定义jp0     at？q = onion＆amp; p = 1＆amp; 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不同），因为它是您从中获取信息的服务器这违反了跨原产地规则。在这种情况下，它的Recipe Puppy没有为Access-Control-Allow-Origin标题设置。

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

然后您的流程将转移到：

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

至于你目前转向jsonp，看来jsonp库由于某种原因没有正确导出jp0。这可能是您的构建工具的错误。您需要仔细检查您的设置，并确保您的构建工具正在拾取jsonp库并将其实际放入已编译的源中。