如何将原始数据主体添加到axios请求中？

Question

我正在尝试使用Axios与我的React应用程序中的API通信。我设法使GET请求起作用，但是现在我需要一个POST。

我需要正文为原始文本，因为我将在其中编写一个MDX查询。这是我发出请求的部分：

axios.post(baseUrl + 'applications/' + appName + '/dataexport/plantypes' + plan,
    {
      headers: { 'Authorization': 'Basic xxxxxxxxxxxxxxxxxxx',
      'Content-Type' : 'text/plain' }
    }).then((response) => {
      this.setState({data:response.data});
      console.log(this.state.data);
    });

在这里，我添加了内容类型部分。但是如何添加身体部位？

谢谢。

编辑：

这是工作邮递员请求的屏幕截图

Answer 1

您可以使用 postman 生成代码。看看这张图片。按照步骤 1 和步骤 2 进行操作。

如果您的端点仅接受通过 Body（在邮递员中）发送的数据，您应该发送 FormData。

var formdata = new FormData();
//add three variable to form
formdata.append("imdbid", "1234");
formdata.append("token", "d48a3c54948b4c4edd9207151ff1c7a3");
formdata.append("rate", "4");
      
let res = await axios.post("/api/save_rate", formdata);

Answer 2

如何使用直接axiosAPI？

axios({
  method: 'post',
  url: baseUrl + 'applications/' + appName + '/dataexport/plantypes' + plan,
  headers: {}, 
  data: {
    foo: 'bar', // This is the body part
  }
});

资料来源：axios api

Answer 3

这是我的解决方案：

axios({
  method: "POST",
  url: "https://URL.com/api/services/fetchQuizList",
  headers: {
    "x-access-key": data,
    "x-access-token": token,
  },
  data: {
    quiz_name: quizname,
  },
})
.then(res => {
  console.log("res", res.data.message);
})
.catch(err => {
  console.log("error in request", err);
});

这应该有帮助

Answer 4

关键是使用"Content-Type": "text/plain"@MadhuBhat 提到的。

axios.post(path, code, { headers: { "Content-Type": "text/plain" } }).then(response => {
    console.log(response);
});

如果您使用.NET，需要注意的一点是控制器的原始字符串将返回415 Unsupported Media Type. 为了解决这个问题，您需要像这样将原始字符串封装在连字符中并将其发送为"Content-Type": "application/json"：

axios.post(path, "\"" + code + "\"", { headers: { "Content-Type": "application/json" } }).then(response => {
    console.log(response);
});

C# 控制器：

[HttpPost]
public async Task<ActionResult<string>> Post([FromBody] string code)
{
    return Ok(code);
}

https://weblog.west-wind.com/posts/2017/sep/14/accepting-raw-request-body-content-in-aspnet-core-api-controllers

如果有帮助，您还可以使用查询参数进行 POST：

.post(`/mails/users/sendVerificationMail`, null, { params: {
  mail,
  firstname
}})
.then(response => response.status)
.catch(err => console.warn(err));

这将发布一个带有两个查询参数的空主体：

POST http://localhost:8000/api/mails/users/sendVerificationMail?mail=lol%40lol.com&firstname=myFirstName

来源：https : //stackoverflow.com/a/53501339/3850405

Answer 5

您可以使用以下内容传递原始文本。

axios.post(
        baseUrl + 'applications/' + appName + '/dataexport/plantypes' + plan, 
        body, 
        {
            headers: { 
                'Authorization': 'Basic xxxxxxxxxxxxxxxxxxx',
                'Content-Type' : 'text/plain' 
            }
        }
).then(response => {
    this.setState({data:response.data});
    console.log(this.state.data);
});

只要有在您的原始文本body，或直接引号中，把它作为'raw text to be sent'代替body。

axios帖子的签名是axios.post(url[, data[, config]])，因此data您可以在其中传递请求正文。

Answer 6

你可以像这样传递参数

await axios.post(URL, {
  key:value //Second param will be your body
},
{
headers: {
  Authorization: ``,
  'Content-Type': 'application/json'
}

这也使得在 Jest 中测试/模拟变得更容易