AxiosPOST请求报错？教你正确发送JSON数据！

本文针对Axios POST请求发送JSON数据报错问题，详细讲解了错误原因及正确解决方案。 许多开发者在使用Axios向接口（例如`/auth/loginByWeb`）发送POST请求时，容易将JSON数据错误地附加到URL上，导致请求失败。文章指出，正确方法是设置请求头`Content-Type`为`application/json`，并将JSON数据作为请求体（body）发送，并提供了完整的JavaScript (axios)和Vue.js代码示例，帮助开发者快速解决Axios POST请求报错问题，确保JSON数据能被后端接口正确解析。

解决Axios POST请求发送JSON数据报错

在使用Axios向/auth/loginByWeb接口发送POST请求时，错误地将数据附加到URL上，导致报错。 正确的做法是将JSON数据作为请求体发送，而不是URL参数。

正确方法：

要正确发送JSON数据，需要：

1. 设置请求头Content-Type为application/json。
2. 将数据作为请求体（body）发送。

修改后的代码：

JavaScript (axios请求函数):

// login
export const PostLogin = (params) => request.post(
  `/auth/loginByWeb`,
  params,
  {
    headers: { 'Content-Type': 'application/json' },
  }
);

Vue.js (调用请求函数):

methods: {
  async onSubmit() {
    const logindata = {
      username: this.username,
      pwd: this.pwd,
    };
    const { data: res } = await PostLogin(logindata);
    // 处理返回结果res
  }
}

通过以上修改，Axios将正确地以JSON格式发送登录数据到后端接口。 请确保您的后端接口能够正确解析JSON数据。

今天关于《AxiosPOST请求报错？教你正确发送JSON数据！》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！