Express rest api working in postman and development, but not when deployed

Question

I have a project with Vue frontend, Express backend and Mysql as database (using Sequelize as ORM) In development, the frontend communicates with the backend API without any issues. When backend deployed on heroku, i can get a valid response when i use postman to query the endpoints but when i try to do the same from the frontend running on localhost:8080, i get a blocked error as shown in the screenshot

below is my server.js (express startup code) that works when hosted on localhost:5000 and can communicate with the frontend on localhost:8080 but when backend is deployed to heroku, also working through postman, the fontend can't access the API on heroku because it gets blocked

I dont know if this is a CORS issue as the error says nothing about CORS.

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());
//routes
const apiRouter = require('./routes/apiRouter');

app.use('/api', apiRouter);

/* -------------------------
Middlewares
------------------------
*/
app.use(cookieParser());
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(passport.initialize());
app.use(morgan('dev'));
/* Port and start up */
const port = process.env.PORT || 5000;
app.listen(port);

frontend is not deployed, still runs on localhost:8080 backend deployed on heroku at getcvng.herokuapp.com/api — Somto
– Somto, Commented Nov 26, 2020 at 8:34
I just figured out the issue, My timeout was 50ms, which worked find in development, but in production, it takes a while to get a response, i just increased the timeout for each request using an interceptor — Somto
– Somto, Commented Nov 26, 2020 at 13:31

Somto · Accepted Answer · 2020-11-26 13:39:28Z

1

The axios timeout was too short to work in production. it was set to 50ms. Just had to increase it to 5s using interceptors

//from api.js
import axios from 'axios';
import store from '../store/store';
const token = store.getters.GET_WEBTOKEN;
export default axios.create({
  baseURL: store.state.apiURL,
  headers: {
    Authorization: token,
  },
});


//in main.js
import api from './service/api';
Vue.prototype.$http = api;
api.defaults.timeout = 1000 * 5; //I changed this

Now i solved the issue, unto other oones

answered Nov 26, 2020 at 13:39

Somto

236 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Express rest api working in postman and development, but not when deployed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related