I am using NodeJS & Express, MySQL and React. I deployed the frontend and backend separately on Heroku.
I keep getting the error 503 Service Unavailable and CORS issue on the deployed application but when I run it locally it works fine, which is weird.
Here’s the console errors:
First error:
Access to XMLHttpRequest at ‘https://react-tws-hubspot-be-a7eecd7171c3.herokuapp.com/upload/contacts’ from origin ‘https://react-tws-hubspot-fe-b3d36e68376c.herokuapp.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Second error:
POST https://react-tws-hubspot-be-a7eecd7171c3.herokuapp.com/upload/contacts net::ERR_FAILED 503 (Service Unavailable)
I’m using cors and configured it already:
app.use(cors({
origin: 'https://react-tws-hubspot-fe-b3d36e68376c.herokuapp.com' || process.env.FRONTEND_URL,
methods: ['GET', 'POST', 'OPTIONS', 'PUT'],
credentials: true,
allowedHeaders: ['Content-Type', 'Authorization'],
}));
app.options('*', cors());
Here’s my endpoint /upload/contacts that accepts a file upload and a multer middleware get file metadata (basically a function that extracts CSV data and upload it to HubSpot):
app.post('/upload/contacts', upload.array('files', 4), async (req, res) => {
try {
const contactBuffer = req.files[0].buffer;
const companyBuffer = req.files[1].buffer;
const contactBuffer2 = req.files[2].buffer;
const projectBuffer = req.files[3].buffer;
const filename = req.body.filename;
const deal_stage = req.body.deal_stage;
hubspot_api_key = req.body.hubspot_api_key;
console.log('Parsing contact CSV');
const Contact = await parseCsvBuffer(contactBuffer);
console.log('Parsing company CSV');
const Company = await parseCsvBuffer(companyBuffer);
console.log('Importing to HubSpot');
const importResponse = await importToHubspot(filename, contactBuffer2, companyBuffer, projectBuffer, hubspot_api_key);
console.log('Waiting for operations to complete');
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
await delay(12000);
console.log('Fetching contacts cache');
const contactsCache = await getAllContactsToCache(hubspot_api_key);
console.log('Fetching deals cache');
const dealsCache = await getAllDealsToCache(hubspot_api_key);
if (importResponse !== 0) {
const response = await createNewRecords(Contact, Company, contactsCache, dealsCache, broadcastProgress, hubspot_api_key, deal_stage);
res.status(200).send(response);
} else {
res.status(400).send({ message: 'Import failed, no records were created.' });
}
} catch (error) {
console.error(error.response ? error.response.data : error.message);
res.status(error.response ? error.response.status : 500).send(error.response ? error.response.data : 'Server Error');
}
})
Here’s my frontend request:
export async function sendToServer(fileName, contactBlob, companyBlob, contactBlob2, projectBlob, toggleModal, setLoading, hubspot_api_key, dealStage) {
let form = new FormData();
form.append('files', contactBlob, 'Construct Connect Contacts Main.csv');
form.append('files', companyBlob, 'Construct Connect Company.csv');
form.append('files', contactBlob2, 'Construct Connect Contacts.csv');
form.append('files', projectBlob, 'Construct Connect Projects.csv');
form.append('filename', fileName);
form.append('hubspot_api_key', hubspot_api_key);
form.append('deal_stage', dealStage);
if (hubspot_api_key !== '') {
try {
setLoading(true);
const res = await axios.post(`${BASE_URL}/upload/contacts`, form, {
headers: {
'Content-Type': 'multipart/form-data',
}
});
if (res.status === 200) {
console.log(`Data from server: ${res.data}`);
console.log(`Message from server: ${res.message}`);
toggleModal("Success");
} else {
toggleModal("Failed");
}
} catch (error) {
console.log(`Error sending contact and company data to backend server. Error: ${error}`);
} finally {
setLoading(false);
}
} else {
console.log("There's no hubspot api key!");
}
}
Just like I said, I can complete file upload when I run my code locally but it doesnt work on the deployed application in heroku.
I tried adding cors middleware to whitelist the origins, I’ve also checked my env variables (both dev and production env - on heroku), tried running it locally (works great btw).