Using server-side proxy to avoid cross-domain policy errors in react

Question

I have this action creator in my React+Redux app. Now I want to fetch data from Recipe Puppy, but I can't, because I'm getting that error:

[![enter image description here][1]][1]

So I want to use a server-side proxy, like so:

1. Client calls server-side proxy for information.

2. Proxy calls Recipe Puppy's API and translates or passes through information as needed.

3. Proxy relays that information to the client-side code for further processing.

Question: Where and how can I create that proxy? I was searching for it on Google, but I didn't find how to do it inside React app. Can you give me some advice, how to do it or where can I find corresponding materials?

    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

Answer 1

You could use a tool like https://github.com/Rob--W/cors-anywhere or really any other proxy which adds the desired CORS headers.

Just search for cors proxy and I'm sure you'll find something which fits your needs. :)