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

Question

在邮递员它工作：1) url: https://app/login2) method: POST3) body4) x-www-form-urlencoded5)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 错误 您没有在 server.js 上创建 res.get("/api/products") 或者您没有设置代理。检查下面的代理设置。

代理错误：无法代理请求 /api/products 检查：

1. 前端/package.json

   { "name": "frontend", "proxy": "http://127.0.0.1:5000", ... }

2. 停止运行前端和后端

3. 先运行后端

   启动

4. 然后前端

   cd 前端 npm start