使用“Content-Type”从axios发送post请求:“application/x-www-form-urlencoded”返回401 Unauthorized响应

5f0d552i  于 2023-08-04  发布在  iOS
关注(0)|答案(3)|浏览(152)

我正在向服务器发送一个POST请求,通过axios获取一个令牌,其Content-Type头部为x-www-form-urlencoded。我试过同样的 Postman 和它的工作正常。我在请求体中发送一个grant_type和client_credentials的键值对。
这是我的Axios请求:

axios.post(`${baseURI}/protocol/openid-connect/token`, data, {
  headers : {
    "Authorization" : "Basic " + token,
    "Content-Type" : "application/x-www-form-urlencoded"
  },
  withCredentials: true
}).then(response => {
  AUTH_TOKEN = response.data.access_token;
  console.log(response.data);
}).catch(error => {
  console.log(error.response);
})

字符串
数据对象由client_credentials组成。相同的credentials在postman中给出成功的响应。

q43xntqr

q43xntqr1#

我遇到了同样的问题,直到我最终发现Axios需要将数据对象重新格式化为查询字符串。
因此,创建一个这样的函数:

function getQueryString(data = {}) {
  return Object.entries(data)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
}

字符串
非常简单,只需要对对象的所有部分进行URI编码,并使用&将它们连接起来。
然后像这样修改你的代码:

axios.post(`${baseURI}/protocol/openid-connect/token`,data, {
  headers : {
    "Authorization" : "Basic " + token,
    "Content-Type" : "application/x-www-form-urlencoded"
  },
  withCredentials: true,
  transformRequest: getQueryString
})
.then(/*...*/);


你可以在这里阅读不同的选项,包括transformRequest,用于请求配置:https://github.com/axios/axios#request-config
(我仍然很恼火,这是必要的,而不仅仅是由Axios处理,但哦,好吧。

rekjcdws

rekjcdws2#

虽然@binary lobster解决方案非常简洁,但可以考虑像这样使用qs库:

import qs from 'qs'

axios.post(`${baseURI}/protocol/openid-connect/token`,
  qs.stringify(data), {
  headers : {
    "Authorization" : "Basic " + token,
    "Content-Type" : "application/x-www-form-urlencoded"
  }
})
.then(/*...*/);

字符串
查看更多信息

esbemjvw

esbemjvw3#

Content-Type设置为application/x-www-form-urlencoded时,现代Axios会自动转换为url编码:
https://axios-http.com/docs/urlencoded

const data = {
  x: 1,
  arr: [1, 2, 3],
  arr2: [1, [2], 3],
  users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}],
};

await axios.post('https://postman-echo.com/post', data,
  {headers: {'content-type': 'application/x-www-form-urlencoded'}}
);

字符串
以上将呈现为:

{
    x: '1',
    'arr[]': [ '1', '2', '3' ],
    'arr2[0]': '1',
    'arr2[1][0]': '2',
    'arr2[2]': '3',
    'arr3[]': [ '1', '2', '3' ],
    'users[0][name]': 'Peter',
    'users[0][surname]': 'griffin',
    'users[1][name]': 'Thomas',
    'users[1][surname]': 'Anderson'
  }


至少Axois有表单提交API(从1995年开始!)working))

相关问题