錯誤：請求失敗，狀態碼為 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（錯誤請求）

錯誤：Request failed with status code 400 at createError (createError.js?2d83) at settle (settle.js?467f) at 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 中發送和在應用程序中發送有什么區別？ 正文內容轉換為字符串？

Answer 1

代碼在 Content-Type 中聲明主體將是 URL 字符串編碼的，但在主體中它被賦予了一個 JavaScript 對象。 Axios 客戶端似乎沒有將該 body 對象轉換為 url 編碼值（即從{a: 5, b: 2}到"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

Answer 4

代碼在 Content-Type 中聲明主體將是 URL 字符串編碼的，但在主體中它被賦予了一個 JavaScript 對象。 似乎 Axios 客戶端不會將該主體對象轉換為 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'
}
})