Axios post request is returning 401 unauthorised error

Question

I am developing a login screen. I'm using axios to call api. Axios post request is returning 401 error when used. But the same code works fine when I hard code the data to be sent. It does not read the json format data stored in the form.
What can I do?

class Login extends React.Component {
      handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            let cred= JSON.stringify(values);
            console.log('json values of form: ',cred );
            axios.post('http://10.42.0.108:8000/user/login/',cred)
            .then(function (response) {
              console.log(response);
            });
            // .catch(function (error) {
            //   console.log(error);
            // });
          }
        });
      };

      render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <React.Fragment>
              <div className='login'>
    <div className="login-container shadow-lg p-3 mb-5 ml-3 bg-white rounded">               
        <Form onSubmit={this.handleSubmit} className="login-form px-5 py-5">
            <div className="text-center">
                    <h3 className="dark-grey-text mb-5">
                      <strong>Sign in</strong>
                    </h3>
            </div>
            <Form.Item>
              {getFieldDecorator('outlook_id', {
                rules: [{ required: true, message: 'Please input your username!' }],
              })(
                <Input
                  prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="Username" style={{width:'300px'}}
                />,
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: 'Please input your Password!' }],
              })(
                <Input
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  type="password"
                  placeholder="Password" style={{width:'300px'}}
                />,
              )}
            </Form.Item>
            <Form.Item>
              {/* {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true,
              })(<Checkbox>Remember me</Checkbox>)} */}

              <Button type="primary" htmlType="submit" className="login-form-button">
                Log in
              </Button>
            </Form.Item>
          </Form>
      </div>
         </div>
         </React.Fragment>    
        );
      }
    }

const WrappedLogin = Form.create({ name: 'normal_login' })(Login);
export default WrappedLogin;

I tried changing the variable and everything. it always returns the same error. Im new to this. please help.This is the error.

POST http://10.42.0.108:8000/user/login/ 401 (Unauthorized)
Uncaught (in promise) Error: Request failed with status code 401
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

What is the reason for stringifying your json? Does your backend receive a string or a json? If a json is required, just send the raw object. — Navid
What you see when you print values in handleSubmit? Are the values same as your hard coded values? — Wijitha
@ArunKAnil but the data is getting converted to string in handleSubmit -> let cred= JSON.stringify(values); — Navid
@ArunKAnil for posting data with axios it is not needed to convert data to string, just send it away. The correct statement should be axios.post('http://10.42.0.108:8000/user/login/', values) instead of axios.post('http://10.42.0.108:8000/user/login/',cred) — Navid

Arun K Anil Arun K Anil · Accepted Answer · 2019-08-20T06:22:09

for posting data with axios it is not needed to convert data to string, just send it away. The correct statement should be axios.post('http://10.42.0.108:8000/user/login/', values) instead of

axios.post('http://10.42.0.108:8000/user/login/',cred)

----Answered by Navid. user:3744479

Axios post request is returning 401 unauthorised error

1 Answers