gpt4 book ai didi

javascript - 如何使用 Vue JS-axios 在 POST api 中传递 Header + Body

转载 作者:行者123 更新时间:2023-11-28 14:38:39 25 4
gpt4 key购买 nike

我正在尝试调用 aws Cognito 的 post API ( Token endpoint )。它在我的 postman 客户端中完美运行。但我在 VueJS 代码中遇到了这个问题。

下面是我的代码片段。

测试.vue

<script>
HTTP.post(`token`, {
'grant_type': 'authorization_code',
'client_id': 'XXXXXXXXXXXXXXXXXXXXXXXXX',
'redirect_uri': 'http://localhost:8080/callback',
'code': this.$route.query.code
})
.then(response => {
console.log('Response: ' + response)
})
.catch(e => {
console.log('Error: ' + e)
})
</script>

我成功从 Login Endpoint 获取“代码”值在上面的代码中,HTTP 是从下面的其他 javascript 导入的对象。

http-common.js

import axios from 'axios'

export const HTTP = axios.create({
baseURL: 'https://maddox.auth.eu-west-1.amazoncognito.com/oauth2/',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})

我不确定,但问题是在我的 postman 中,我在正文+标题中使用了“application/x-www-form-urlencoded”选项。在这里我无法在正文中设置这个值。

我认为我的 header 和正文中的“application/x-www-form-urlencoded”选项未正确设置。

I have tried with {emulateJSON:true} option. But not worked!

我收到HTTP 代码:400

{"data":{"error":"invalid_request"},"status":400,"statusText":"Bad Request","headers":{"pragma":"no-cache","content-type":"application/json;charset=UTF-8","cache-control":"no-cache, no-store, max-age=0, must-revalidate","expires":"0"},"config":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json","Content-Type":"application/x-www-form-urlencoded"},"method":"post","baseURL":"https://maddox.auth.eu-west-1.amazoncognito.com","url":"https://maddox.auth.eu-west-1.amazoncognito.com/oauth2/token","data":"{\"grant_type\":\"authorization_code\",\"client_id\":\"4jcmshlse80ab667okni41fbf5\",\"redirect_uri\":\"http://localhost:8080/callback\",\"code\":\"e19170dc-3d8f-420e-99b6-c05f7abad313\"}"},"request":{}}

最佳答案

TOKEN Endpoint只接受 application/x-www-form-urlencoded 并且您正在发送 JSON(因为 axios 只将 JavaScript 对象序列化为 JSON)

如何使用axios发送application/x-www-form-urlencoded:https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

这里是 qs 库的示例

<script>
HTTP.post(`token`, qs.stringify({
'grant_type': 'authorization_code',
'client_id': 'XXXXXXXXXXXXXXXXXXXXXXXXX',
'redirect_uri': 'http://localhost:8080/callback',
'code': this.$route.query.code
}))
.then(response => {
console.log('Response: ' + response)
})
.catch(e => {
console.log('Error: ' + e)
})
</script>

关于javascript - 如何使用 Vue JS-axios 在 POST api 中传递 Header + Body,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48976271/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com