[SOLVED] 2 docker containers (Django & React), isomorphic-fetch and a login request

2 docker containers (Django & React), isomorphic-fetch and a login request

My setup is running on Docker with a frontend (React) as well as a backend (Django) container.

I'm using the login-form component of the drf-react-app below in another project and am clueless as to how the api fetch request in the loginUser action creator (src/actions/user.js) knows which URL it is supposed to use..?

user.js:22 POST http://localhost:3000/api/obtain-auth-token/ 404 (Not Found)

I want it to send the request to the server at port 8000. I took the code from this drf-react boilerplate: https://github.com/moritz91/drf-react-login

export function loginUser(username, password) {
    return (dispatch, getState) => {

        const payload = {username, password};

        dispatch({type: LOGIN_USER_REQUEST, payload});

        return fetch(`/api/obtain-auth-token/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload)
        })
        .then(handleResponse(dispatch, LOGIN_USER_RESPONSE))
        .then((json) => {
            saveUser(json);
            return json;
        })
        .catch(handleError(dispatch, LOGIN_USER_RESPONSE))
    }
}

What am I missing?

Solution

In your package.json you have a proxy property set to "http://backend:8000". The proxy is used to redirect requests to a given url when you make a request against your local server http://localhost:3000. So if that's not working then you might be missing a step that enables the proxy.