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

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

错误：

未捕获的引用错误：未定义 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

你不能使用 client-only 代码，至少不能使用 JSONP+Axios（Axios doesn't (natively) support JSONP；"jsonp" 库与 Axios 不同），因为它是服务器您从那里获取的信息违反了 cross-origin 规则。在这种情况下，没有为 Access-Control-Allow-Origin headers.

设置 Recipe Puppy

一种选择是使用 server-side 代理，如@Pointy 所述。

您的流程将转移到：

客户调用 server-side 代理获取信息。
Proxy 调用 Recipe Puppy 的 API 并根据需要翻译或传递信息。
代理将该信息中继到 client-side 代码以供进一步处理。

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

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

Can't fetch data, CORS issue, trying to hack it with JSONP, still not working

javascript

json

jsonp

reactjs

axios