I recently created a server and deployed it to Heroku. It works fine in Postman and when testing out basic GET requests. But whenever I try to make POST request to it via Axios in my client, I am met with this error.

In my back-end server, I enabled cors so that it could make cross-domain requests. Here, on lines 67 and 69, I set up cors before declaring my routes (click here to see the full 'app.js' file on my github.)

My register router works fine in Postman, and its response time is below 30 seconds, at 1877 milliseconds.

Interestingly, when I make a conditional GET requests to my API in my client, it works. (The lines of code where I make aforementioned GET request are on line 222-258 here)

In my client, the problem arises whenever I want to make a POST request in my client. Here is network response I get in the image below.

If I go to the response tab, it shows my POST request timing out at 30.1 seconds, despite the fact that the same API request was finished in 1.8 seconds in Postman.

Here is the code in particular where I am making the POST request in my index_actions.js file.

import axios from 'axios' export function register(fields) { console.log('below are the fields'); console.log(fields); return function action(dispatch) { let objArrSkills = Object.keys(fields.form_skills); let skillsArr = objArrSkills.map(function (value) { if (fields.form_skills[value] === true && fields.form_skills[value] !== undefined) { return value; } }); let objArrArts = Object.keys(fields.form_arts); let artsArr = objArrArts.map(function (value) { if (fields.form_arts[value] === true && fields.form_arts[value] !== undefined) { return value; } }); console.log('artsArr is...' + artsArr); console.log('skillsArs is...' + skillsArr); const request = axios({ method: 'post', url: "https://jammr-backend.herokuapp.com/register", data: { firstName: fields.form_first_name, lastName: fields.form_last_name, email: fields.form_email, password: fields.form_password, skills: skillsArr, iWantToMake: artsArr, street: fields.form_address, city: fields.form_city, provinceState: fields.form_province, gender: fields.form_gender, imLookingFor: ['Acting', 'Drawing', 'Music', 'Writing', 'Programming', 'Videography'] }, headers: { 'Access-Control-Allow-Origin': '*' } }); return request.then(response => { console.log('axios call ran! Below is response....'); console.log(response); dispatch({ type: 'REGISTER', payload: { myId: response.data, fields: fields, skills: skillsArr, iWantToMake: artsArr } }) }, err => { if (err) throw err; }) } };

Everything works fine right up until I make the Axios to the /register route. The files pertaining to this issue are here and here.

UPDATE: I went into my app.js file to change the Cors configuration.I commented out app.use(cors()); and app.options('*', cors()); and replaced it with this.

/// x-auth is a custom-header in my server-side code app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", '*'); res.header("Access-Control-Allow-Credentials", true); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,x-auth,Accept,content-type,application/json'); next(); }); /// After this line, I declare my routes.