Redux Action fetching from backend port

Question

My app is running on port 3000. and i want to fetch data in a redux action from backend running on port 5000.

The data is not being fetched from backend. I'm getting not defined error.

frontend/redux/categoryAction.js:

export const listCategories = () => async (dispatch) => {
try {
    dispatch({ type: 'CATEGORY_LIST_REQUEST' })

    const { data } = await fetch('http://localhost:5000/api/categories')

    dispatch({
        type: 'CATEGORY_LIST_SUCCESS',
        payload: data
    })
} catch (error) {
    dispatch({
        type: 'CATEGORY_LIST_FAIL',
        payload: error.response && error.response.data.message
            ? error.response.data.message : error.message
    })
 }
}

Does this answer your question? [How to overcome the CORS issue in ReactJS](https://stackoverflow.com/questions/43462367/how-to-overcome-the-cors-issue-in-reactjs) the [following answer](https://stackoverflow.com/a/64178626/1641941) is probably what you are looking for. — HMR, Aug 30 '21 at 10:07

score 0 · Answer 1 · answered Aug 30 '21 at 08:40

You probably get a cors error when you look at the network tab or console.

You should set up a proxy in your package.json and use a root relative url to the api:

fetch('/api/categories')

I assume that when this goes into production the api and react files are served on the same domain, if it's not then you can set up your own proxy

Redux Action fetching from backend port

1 Answers1