我如何将这个axios调用转换为fetch?

qxgroojn  于 2023-03-18  发布在  iOS
关注(0)|答案(1)|浏览(123)

我有下面的axios代码,它可以工作,我得到了预期的响应:
(some字符串因明显原因而更改)

const data = new FormData()

data.append('grant_type', 'password')
data.append('username', 'XXXXX')
data.append('password', 'YYYYY')

const url = 'https://www.example.com/endpoint/'

const config = {
  withCredentials: false,
  auth: {
    username: 'AAAAA',
    password: 'BBBBB'
  },
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}

const response = await axios.post(url, data, config)
const answer = response.data.answer
console.log('answer', answer)

我想将此请求转换为获取,但收到一条Bad Request消息。我已尝试:

const authorization = btoa('AAAAA:BBBBB')

console.log(authorization)

const data = new FormData()

data.append('grant_type', 'password')
data.append('username', 'XXXXX')
data.append('password', 'YYYYY')

console.log(data)

const response = await fetch('https://www.example.com/endpoint/', {
    method: 'POST',
    credentials: 'omit',
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: `Basic ${authorization}`
    },
    body: data
})

console.log(response)

尝试在网络标签中比较两个请求没有多大帮助。它们看起来几乎相同。我在请求中看到的唯一区别是在标头中:
阿西奥斯

"accept": "application/json, text/plain, */*",
"content-type": "multipart/form-data; boundary=----WebKitFormBoundaryxYSW9yII1AMmhcc3",

accept键不仅仅包含*/*,content-type键包含边界信息。
获取

"accept": "*/*",
"content-type": "multipart/form-data",

我不确定边界信息对内容类型是否重要,也不知道如何确保它被包含在内。我尝试修改代码以使accept键匹配,但这并没有改变行为。

noj0wjuj

noj0wjuj1#

通过一些额外的研究,我了解到当使用fetch来发布multipart/form-data时,不应该定义content-type,这样系统就可以构造它并添加所需的边界信息,此外,credentials设置也不是必需的。
获取请求应如下所示:

const response = await fetch('https://www.example.com/endpoint/', {
    method: 'POST',
    headers: {
      Authorization: `Basic ${authorization}`
    },
    body: data
})

通过更改代码,我得到了预期的响应。
有关此行为的文档,请参阅Tellfetch()的答案,以完全不发送Content-Type标头

相关问题