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

Posted 2023-03-11

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

【英文标题】：Error: Request failed with status code 400. Differences between sending in POSTMAN and in the application

【发布时间】：2019-12-02 11:07:36

【问题描述】：

在 POSTMAN 中有效：

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（错误请求）

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

在标签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 和应用程序中发送有什么区别？正文内容转成字符串？

【问题讨论】：

您确定这不是 CORS 的问题吗？ Chrome 打包应用可以拥有跨域权限。当您安装 Postman 时，它会提示您此应用将访问任何域。

@KrzysztofKrzeszewski 我没有来自 CORS 的任何错误。仅限：400 (Bad Request)

@KrzysztofKrzeszewski 如果CORS 有问题，我可能会出错。也许我需要转换一些东西？类似于：JSON.stringify ()?

根据 axios 文档，您使用 data 键而不是 body 发布

@KrzysztofKrzeszewski 我将body 更改为data，但我有同样的错误

【参考方案1】：

代码在 Content-Type 中声明正文将是 URL 字符串编码，但在正文中，它被赋予了一个 javascript 对象。 Axios 客户端似乎没有将该主体对象转换为 url 编码值（即从a: 5, b: 2 到"a=5&b=2"）。代码需要一个函数来转换它。一个流行的是qs。

否则您的数据可能会使用.toString() 方法转换为字符串，该方法将为您提供"[object Object]"，您应该能够在开发人员工具的网络选项卡中看到这一点。

【讨论】：

将body 更改为data？我必须使用parse 或stringify？

如果服务器可以接受，可以将Content-Type改为application/json

【参考方案2】：

Localhost:3000/api/products 404 错误 您没有在 server.js 上创建 res.get("/api/products") 或者您没有设置代理。检查下面的代理设置。

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

前端/package.json

“名称”：“前端”， "代理": "http://127.0.0.1:5000", ...

停止运行前端和后端

先运行后端

npm 开始

然后是前端

cd 前端 npm 开始

【参考方案3】：

Axios 处理错误的方式不同。

找出真正的问题。

你应该使用error.request来检查你发出的请求是否有错误

并使用error.response从服务器获取错误反馈

axios( 方法：'发布'， url: 'https://app/login', 身体：身体1， 标题： “内容类型”：“应用程序/x-www-form-urlencoded” ) .then(res => 如果（res.status === 200） 控制台.log(res) ).catch(错误 => 如果（错误。请求） 控制台.log(err.request) 如果（错误。响应） 控制台.log(err.response) );

【讨论】：

感谢我能够使用它来调试我的错误

【参考方案4】：

代码在 Content-Type 中声明正文将是 URL 字符串编码，但在正文中，它被赋予了一个 JavaScript 对象。 Axios 客户端似乎没有将该 body 对象转换为 url 编码值（即从 a: 5, b: 2 到“a=5&b=2”）。代码需要一个函数来转换它。一个流行的是qs。

npm i qs;
import qs as qs;

axios.post(your_url,
  qs.strigify(
      key1:value1,
      key2:value2,
 ),
headers:
   'content-type': 'application/x-www-form-urlencoded;charset=utf-8'

)