Axios post call doesn't work as expected

Question

I'm trying to make POST call from my SPA to a Flask backend. I am able to make the call successfully from the Postman but the exact same call fails with Axios. As I can see both of them generate a little different cURL command. Anyone know what is the matter here?

Here is how I'm making my Axios call.

export function login(email, password) {
  return axios.post('www.app.com/login', {
    email, password
  })
};

Here is the cURL generated in the browser network tab, which doesn't work as expected.

curl 'https://www.myapp.com/login' -H 'Host: somesite.com' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:58.0) Gecko/20100101 Firefox/58.0' -H 'Accept: application/json, text/plain, */*' -H 'Accept-Language: en-US,en;q=0.5' --compressed -H 'Referer: http://localhost:3000/' -H 'Content-Type: application/json' -H 'Origin: http://localhost:3000' -H 'Connection: keep-alive' --data '{"email":"me@hello.com","password":"hello"}'

Here is the cURL generated by Postman which works.

curl -X POST \
  http://www.myapp.com/login \
  -H 'cache-control: no-cache' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -H 'postman-token: c85019e0-55ed-9124-9f46-f006b22e4d56' \
  -F email=hello@hello.com \
  -F password=hello

I can see that the Postman call has a -F option which is not there in my Axios call. Any help is appreciated.

Seems like in your Postman request, it's sending form data, but for axios request, it's sending JSON data. You should first check if your Flask backend works with JSON or not. — Hoang Do, Dec 14 '17 at 05:20
Yes, I think that you are right. I'll surely check that. Is there a way to send form data via axios? — aks, Dec 14 '17 at 05:21

score 1 · Answer 1 · answered Apr 27 '18 at 19:02

I ran into similar issues with Vue and axios POST'ing to my Flask backend.

Flask has to have CORS setup and added to your Flask app. Link to flask extension I believe POST requests sent with Postman won't have a CORS issue.

Enable CORS on Flask side once the module is installed.

app = Flask(__name__)
# Enables CORS for all domains on all routes.
cors = CORS(app, resources={r"/*": {"origins": "*"}})

On the frontend side, I have a method to handle the form submission. I had to use the FormData() object to wrap what I wanted to send back to Flask. I also had to set the header to:

headers: {'Content-Type': 'application/x-www-form-urlencoded' }}

handleSubmit() {

    var formData = new FormData();
    formData.append('email', this.email);
    formData.append('password', this.password);

    // Vee-validate method to validate the inputs to form.
    this.$validator.validateAll().then((result) => {
      if (result) {

        axios({
          method: 'post',
          url: 'http://localhost:5000/register',
          data: formData,
          config: { headers: {'Content-Type': 'application/x-www-form-urlencoded' }}
          })
          .then((response) => {
            console.log(response);
        })
          .catch(error => {
            console.log(error.response)
          });
      }
      else {
        console.log('Not Valid')
      }
    })

Doing it this way allowed me to pull the form data out via

email    = request.form['email']
password = request.form['password']

If a bad request is sent from axios and you try to get keys from the 'request.form' like above. Flask will return a 400 error. Watch out for that. Flask 400 Bad Request

Axios post call doesn't work as expected

1 Answers1