Struggling with connecting React front End to Express backend after deploying to Heroku

JavaScript
1

I have deployed my backend on Heroku and works fine as I send a request from POSTMAN.
I have deployed the My react app on Heroku as well.
But I can not get a response from the backend server. Please help

This is the Heroku log detail from the backend.

2020-12-30T16:45:34.688348+00:00 heroku[web.1]: Starting process with command `node index.js`
2020-12-30T16:45:37.852435+00:00 app[web.1]: Server is listening on 34248
2020-12-30T16:45:37.870603+00:00 heroku[web.1]: State changed from starting to up
2020-12-30T16:45:38.000000+00:00 app[api]: Build succeeded
2020-12-30T16:48:18.862763+00:00 heroku[router]: at=info method=OPTIONS path="/api/auth/signup" host=book-share-server-yp.herokuapp.com request_id=4d909f22-7fc3-4273-b010-4395adae20b7 fwd="184.146.219.105" dyno=web.1 connect=1ms service=10ms status=204 bytes=391 protocol=https
2020-12-30T16:48:18.857570+00:00 app[web.1]: OPTIONS /api/auth/signup 204 2.315 ms - 0

Axios Instance fro Api call

import axios from "axios";


const instance = axios.create({
	baseURL:"https://book-share-server-yp.herokuapp.com/api",
	withCredentials: true,
});

instance.defaults.headers.common['Content-Type'] ="application/json";

export default instance;

Signup action

export const signUpUser = (formData)=>{
	return dispatch => {
		// /signup
		axiosInstance.post("/auth/signup",formData)
		.then(res =>{
			getUser(dispatch);
		} )
		.catch(error => {
			signUpUserFail(dispatch, error.response.data.message) 
		})  
	}
}

backend index.js

const express = require("express");
const morgan = require("morgan");
const mongoose = require("mongoose");
const app = express();
const user = require("./routes/users");
const auth = require("./routes/auth");
const books = require("./routes/books");
const notFound = require("./middleware/notFound");
const errorHandler = require("./middleware/errorHandler");
const {authCheck} = require("./middleware/authCheck");
const cookieParser = require("cookie-parser");
const cors = require("cors");
require("dotenv").config();

//DB Connection
mongoose.connect(process.env.MONGO_URI, 
	{
		useNewUrlParser: true,
		useUnifiedTopology: true,
		useCreateIndex: true
	}).catch(error =>{
		console.log(error)
		throw Error("DB connection problem")
		});
const port = process.env.PORT||8004;
app.use(express.json());
app.use(cookieParser());
app.use(morgan("dev"));
app.use(cors({
	origin:"https://book-share-client-yp.herokuapp.com/",
	credentials:true
}))

app.use("/api/user",authCheck,user);// add authcheck middleware
app.use("/api/auth",auth)
app.use("/api/books",authCheck, books); // add authcheck middleware
app.use( notFound);
app.use( errorHandler);



app.listen(port, ()=>{
	console.log(`Server is listening on ${port}`)
})
2

What’s the network error? As in if you go to the browser, open the network tab in the developer tools and make the call in-app, what’s the status code, response etc. I would strongly suspect a CORS error (you’re making a request from a browser, not Postman, when it fails), but I would need to know what the error is.

3

I got an error that failed to response to data.

signuperror
signuperror813×358 27.5 KB

networkerror
networkerror538×603 10.1 KB

response1
response1788×504 23.4 KB

response2
response2788×433 15 KB

4

Can you connect to the backend on Heroku from the client when the client runs locally?

What is the status code for the fail request?

5

i got this error while i am running react locally and try to connect with backend

errorlocal1
errorlocal1754×433 24.8 KB
errorlocal2
errorlocal2782×415 23.9 KB
errorlocal3
errorlocal3818×473 24.2 KB
localerror
localerror808×459 21.6 KB

6

What happens if you just use app.use(cors()) does it change anything?

7

Same error by using app.use(cors());

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
	},
	"proxies":{
		"/api":{
			"origin":"https://book-share-server-yp.herokuapp.com/api"
		}
	}
}

this is static json file

8

It seems to be something in axios that is preventing the network request/error from showing (it’s giving you that JS error instead). I think the error is occurring before the network request is made, so you’re catching undefined. Then when you try to access properties on the error response, they aren’t there (undefined.response.data.message is not a thing) so you get a JS error rather than something useful. Put a catch block first and log error.toJSON() and see what that says

9

errorlog
errorlog873×577 37.1 KB

10

Yeah, you need to set up CORS properly. Have you done what it says in the error message, do you have CORS stuff added to the API app?

11

That issue is solved! but I can not access cookies in the backend. Do I need to add any headers?