CODEWITHSUNDEEP
reactjsrest
ss sss
ss sss

Reputation: 75

Axios get request wont work but post request does?

import React, { Component } from "react";
import axios from 'axios';

class App extends Component {



  handleSubmit(event) {
    axios.get('http://localhost:3050/login', {
      "username": "username",
      "password": "password"
    })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    event.preventDefault();
  }

  render() {

      return(

        <form onSubmit={this.handleSubmit}>
          <input type="submit" value="Submit" />
        </form>

      );
  }

}

export default App;

In postman, given a GET request and this input json I get below as wanted

{
    "username": "username",
    "password": "password"
}

The response body is a 200 OK and returns 

{ 
    "friends": 0,
    "id": "555"
}

I get this error when I click submit on react though

Error: Request failed with status code 400
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

If I were to change my backend to POST and send axios.post instead it would work . I cant figure it out. Does anyone know? Is there something different you have to do to send a get request with axios?

Upvotes: 0

Views: 707

Answers (4)

user11395273
user11395273

Reputation:

Hi try do it with jsonplaceholder and choose in header Json :) And in server side console.log(req.body) And for finished do const body = username, passport frome state

Upvotes: 0

ibtsam
ibtsam

Reputation: 1720

You are making an axios get request, There are two ways you can pass params to your request

axios.get('http://localhost:3050/login?username='username'&password='password')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

or you can pass params like this

axios.get('http://localhost:3050/login', {
  params: {
   username: "username",
   password: "password"
   }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Ref: Axios Hope it helps

Upvotes: 0

evanjd
evanjd

Reputation: 415

If you want to add query string parameters to your get requests, you need to call axios like so:

axios.get("http://localhost:3050/login", {
  "params": {
    "username": "username",
    "password": "password"
  }
})

Note that the axios.get and axios.post accept different parameters:

  • axios.get(url[, config])
  • axios.post(url[, data[, config]])

You can't use .get and .post interchangeably with the same parameters.

The API you're hitting may also not accept a username and password over its GET API.

Upvotes: 0

Srigar
Srigar

Reputation: 1688

How you are sending JSON in GET request. In GET, you can send values either in path or query params. If you send in body then it wont work. As a best practice, if you want to send something then use POST call instead of GET.

Upvotes: 1

Related Questions