為什么 CURL 工作時 Axios 出現錯誤 415？

Question

如果我做

curl -s -d "username=test&password=test" -X POST https://example.com/api/jwt/login

然后我得到了預期的令牌。 如果我做

const axios = require('axios')

async function getToken() {
  try {
    const response = await axios.post('https://example.com/api/jwt/login', {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      params: {
        username: "test",
        password: "test"
      }
    })
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}
getToken()

然后我得到

Error 415 Unsupported Media Type
HTTP ERROR 415
Problem accessing /api/jwt/login. Reason:
Unsupported Media Type

問題

誰能弄清楚為什么它適用於curl而不是axios ？ 我究竟做錯了什么？

更新

以下給出了相同的錯誤

const qs = require('query-string');

async function getToken() {
  try {
    const response = await axios.post('https://example.com/api/jwt/login', {
      method: 'post',
      params: qs.stringify({
        username: "test",
        password: "test"
      })
  })
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Answer 1

axios.post 的axios.post是url[, data[, config]] 。 請參閱文檔。 您的示例將以下內容傳遞給data參數，這將是請求正文：

{
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  params: {
    username: "test",
    password: "test"
  }
}

服務器無法解析或解析不正確，因此返回415 Unsupported Media Type 。

您需要做的是分離出您的請求正文和配置。 您的請求正文也需要進行編碼。

axios.post(
  'https://example.com/api/jwt/login',
  qs.stringify(({
    username: "test",
    password: "test"
  }),
  {
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  }
)

Answer 2

由於您的Content-Type為application/x-www-form-urlencoded ，因此您無法傳入 javascript object，因此需要對其進行解析。

您可以使用URLSearchParams中的 URLSearchParams API 或使用qs package 來執行此操作。 您還需要在有效負載中使用data鍵而不是params鍵：

const axios = require('axios')
const qs = require('qs')

async function getToken() {
  try {
    const response = await axios.post(
      'https://example.com/api/jwt/login',
      qs.stringify({ username: 'test', password: 'test' }),
      { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }
    )
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}
getToken()

您可以在 axios github 上找到概述此內容的文檔： https://github.com/axios/axios#using-applicationx-www-form

Answer 3

嘗試使用查詢字符串模塊編碼數據

npm install query-string

接着

const qs = require('query-string');
//...    
data: qs.stringify({
username: "test",
password: "test"
}),

https://www.npmjs.com/package/query-string