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

【问题标题】：Using server-side proxy to avoid cross-domain policy errors in react使用服务器端代理避免 react 中的跨域策略错误
【发布时间】：2017-08-04 15:38:24
【问题描述】：

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

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

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

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

问题： 我可以在哪里以及如何创建该代理？我在谷歌上搜索它，但我没有找到如何在 React 应用程序中做到这一点。能给我一些建议吗，怎么做或者在哪里可以找到相应的材料？

    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]: https://i.stack.imgur.com/hr1oT.png

【问题讨论】：

“我可以在哪里以及如何创建该代理？” — 在您的服务器上，使用您选择的编程语言。你不会在你的 React 应用程序中这样做；您的反应应用程序在受同源策略约束的客户端上运行。

标签： javascript reactjs proxy server redux

【解决方案1】：

您可以使用https://github.com/Rob--W/cors-anywhere 之类的工具或任何其他添加所需 CORS 标头的代理。

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

【讨论】：