javascript - 使用服务器端代理避免react中的跨域策略错误

Question

我的 React+Redux 应用程序中有这个 Action 创建器。现在我想从 Recipe Puppy 获取数据，但我不能，因为我收到了该错误:

[![在此处输入图像描述][1]][1]

所以我想使用服务器端代理，如下所示:

1. 客户端调用服务器端代理以获取信息。

2. Proxy 调用 Recipe Puppy 的 API 并根据需要转换或传递信息。

3. 代理将该信息中继到客户端代码以进行进一步处理。

问题: 我在哪里以及如何创建该代理？我在 Google 上搜索它，但没有找到如何在 React 应用程序中执行此操作。您能给我一些建议吗？如何做或者在哪里可以找到相应的 Material ？

    import axios from 'axios'

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

    export function fetchRecipes (searchTermToDOoooooooooo) {
      // Sample 'Onion' query
      const url = `http://www.recipepuppy.com/api/?q=onion&p=1`
      const request = axios.get(url)
      return (dispatch) => {
        request.then(({ data: data1 }) => {
          dispatch({ type: FETCH_RECIPES, payload: data1 })
        })
      }
    }

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


  [1]: /image/hr1oT.png

Answer 1

您可以使用像 https://github.com/Rob--W/cors-anywhere 这样的工具或者任何其他添加所需 CORS header 的代理。

只需搜索 cors proxy，我相信您会找到适合您需求的内容。 :)