错误：请求失败，状态码为 400。在 POSTMAN 和应用程序中发送之间的差异

Question

在邮递员它工作：

1) url: https://app/login

2) method: POST

3) body

4) x-www-form-urlencoded

5)username: ****,

password: ****,

grant_type: 'password',

client_secret: '****',

client_id: '****'

在函数submit方法POST中，当表单提交时，它不起作用。我有错误：

xhr.js?b50d POST https://app/login 400（错误请求）

错误：在 XMLHttpRequest.handleLoad (xhr.js?b50d) 处的 createError (createError.js?2d83) 处，请求失败，状态码为 400 (settle.js?467f)

在选项卡Network中response我有：

{"error":"invalid_client","error_description":"在标题或正文中找不到客户端凭据"}

登录

class Login extends Component {

  constructor (props) {

    super(props);

    this.state = {

      email: '',

      password: ''

    }

  }

  handle = (e) => {

    const name = e.target.name;

    const value = e.target.value;

    this.setState({

      [name]: value

    });

  }

  submit = (event) => {

    event.preventDefault();

    const body1 = {

      username: this.state.email,

      password: this.state.password,

      grant_type: 'password',

      client_secret: '****',

      client_id: '****'

    }

    axios({ 

      method: 'post', 

      url: 'https://app/login', 

      body: body1, 

      headers: {

        'Content-Type': 'application/x-www-form-urlencoded'

      }

      }) 

      .then(res => { 

        if (res.status === 200) {

          console.log(res)

        } 

      }).catch(err => { 

        console.error(err);

      });

  }

  render () {

    return (

      <form action="" method="post" onSubmit={this.submit}>

        <div>

          <label htmlFor="email">Email</label>

          <input type="email" required  name="email"

            value={this.state.email}

            onChange={this.handle}  />

        </div>

        <div>

          <label htmlFor="password">Password</label>

          <input type="password"name="password"

            value={this.state.password}

            onChange={this.handle}  />

        </div>

        <button type="submit" value="Submit">Log</button>

      </form>

    )

  }

}

在 POSTMAN 中发送和在应用程序中发送有什么区别？正文内容转换为字符串？

Answer 1

代码在 Content-Type 中声明主体将是 URL 字符串编码的，但在主体中它被赋予了一个 JavaScript 对象。似乎 Axios 客户端不会将该 body 对象转换为 url 编码值（即 from {a: 5, b: 2}to "a=5&b=2"）。代码需要一个函数来转换它。一个流行的是qs。否则，您的数据可能会被转换为字符串，该.toString()方法将为您提供"[object Object]"，您应该能够在开发人员工具的网络选项卡中看到这一点。

Answer 2

Axios 处理错误的方式不同。找出真正的问题所在。您应该使用 error.request 来检查您提出的请求是否有错误并使用 error.response 从服务器获取错误反馈axios({ method: 'post', url: 'https://app/login', body: body1, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then (res => { if (res.status === 200) { console.log(res) } }).catch(err => { if(err.request){ console.log(err.request) } if( err.response){ console.log(err.response) } });

Answer 3

Localhost:3000/api/products 404 错误&nbsp;您没有在 server.js 上创建 res.get("/api/products") 或者您没有设置代理。检查下面的代理设置。代理错误：无法代理请求 /api/products&nbsp;检查：前端/package.json{ "name": "frontend", "proxy": "http://127.0.0.1:5000", ... }停止运行前端和后端先运行后端启动然后前端cd 前端 npm start