javascript - 无法获取数据，CORS 问题，尝试使用 JSONP 对其进行破解，但仍然无法正常工作

Question

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

它在浏览器中工作，但我试图在我的 React 应用程序中获取它，我遇到了 “请求的资源上没有 'Access-Control-Allow-Origin' header 错误。

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

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

错误:

未捕获的 ReferenceError:未定义 jp0 在 ?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 header 设置的 Recipe Puppy。

如@Pointy 所述，一种选择是使用服务器端代理。

然后您的流程将转移到:

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

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