CODEWITHSUNDEEP
androidnode.jsreactjsmobilerequest-response
user16248109
user16248109

Reputation:

Issues making requests from my frontend to backend locally on mobile

I'm working on an app locally with my React frontend running on my network at port 4000 and my Node backend running on my network at port 5000. I can make every request from my frontend to backend perfectly fine when I'm working on my Macbook - including logging in, posting new data, editing data, etc - but when I open the app on my Pixel 2 over my network to do some mobile optimizing, the login and sign up posts from the frontend just do nothing. This is doubly strange because when I hit port 4000 from my mobile browser, the log in screen from the frontend renders just fine, and when I hit port 5000 I get the expected JSON response from the backend, so the phone is obviously connecting to both. I added in several ternaries during the request cycle to check what what's actually going off, and everything works up until the final .then when the response from the server should be handled by the frontend:

const handleSubmit = (e) => {
        e.preventDefault()
        setOne(true) /* <-- THIS TEST FIRES */
        fetch(`${baseUrl}/users/signin`, {
            method: "POST",
            headers: {
                "content-type": "application/json"
            },
            body: JSON.stringify({
                email: email,
                password: password
            })
        })
        .then(setTwo(true)) /* <-- THIS TEST FIRES */
        .then(resp => resp.json())
        .then(setThree(true)) /* <-- THIS TEST FIRES */
        .then((data) => {
            setFour(true) /* <-- THIS TEST DOES NOT FIRE */
            if (data.error) {
                setError(true)
            } else {
                localStorage.qnToken = data.token
                localStorage.qnTheme = data.result.theme
                dispatch({type: "SET_USER", payload: data.result})
                dispatch({type: "SET_NOTES", payload: data.result.notes})
                history.push("/notes")
            }
        })
    }

I also have a console.log on the login action of my controller on the backend to show the res object - The log fires fine when I log in from my Mac but doesn't trigger at all when I attempt to log in from the phone.

Kind of at a loss here, any ideas why these posts are working on my Mac but not mobile? Wondering if maybe it's some sort of permissions issue with my MongoDB database or something?

Upvotes: 0

Views: 732

Answers (0)

Related Questions