Axios 发布请求返回 401 未经授权的错误答案

【问题标题】：Axios post request is returning 401 unauthorised errorAxios 发布请求返回 401 未经授权的错误
【发布时间】：2019-08-17 06:18:49
【问题描述】：

我正在开发一个登录屏幕。我正在使用 axios 调用 api。 Axios 发布请求在使用时返回 401 错误。但是当我对要发送的数据进行硬编码时，相同的代码可以正常工作。它不会读取存储在表单中的 json 格式数据。
我能做什么？

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;

我尝试更改变量和所有内容。它总是返回相同的错误。我对此很陌生。请帮忙。这是错误。

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)

【问题讨论】：

字符串化你的json的原因是什么？您的后端收到的是字符串还是 json？如果需要 json，只需发送原始对象。
后端需要json中的数据
在handleSubmit 中打印值时看到了什么？这些值是否与您的硬编码值相同？
@ArunKAnil 但数据正在handleSubmit -> let cred= JSON.stringify(values);中转换为字符串
@ArunKAnil 用于使用 axios 发布数据，不需要将数据转换为字符串，只需将其发送出去。正确的语句应该是axios.post('http://10.42.0.108:8000/user/login/', values) 而不是axios.post('http://10.42.0.108:8000/user/login/',cred)

标签： reactjs axios

【解决方案1】：

使用 axios 发布数据不需要将数据转换为字符串，只需将其发送出去。正确的说法应该是axios.post('http://10.42.0.108:8000/user/login/', values) 而不是

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

----由纳维德回答。用户：3744479

【讨论】：

谢谢！因此，如果您想添加身份验证令牌，它将是 axios.post('http://10.42.0.108:8000/user/login/',cred,head)，其中令牌作为第三个参数，这与 GET 请求不同。