Axios使用POST请求发送JSON数据

Question

我正在使用Axios JS库来发送post json请求，但是服务器上没有收到任何数据。以下是我的代码

const dt = JSON.stringify({"data":{"value":"gdfg1df2g2121dgfdg"}});
const request = axios.post(url, {dt});

我需要以 JSON 格式发送 原始请求体。

- h_h

---

你正在发送哪些标头？ - Karthik VU

不发送任何标头。我使用Postman测试了服务器，没有任何标头，服务器正常工作。 - h_h

不确定，但尝试使用 const request = axios.post('https://api.medlanes.com/booking_center/call/get_products', dt);。 - Karthik VU

是的，成功了.... - h_h

Answer 1

默认情况下，axios使用Json来发送数据，因此您无需将数据串行化。问题可能是您正在这样做。您可以尝试在没有这样做的情况下进行发布，并检查是否有效。此外，除非您的服务器上的对象格式是这样的，否则不需要花括号来包装数据。否则，您可以给我有关请求正文外观的信息，以便我有更多上下文。您可以在chrome开发工具中使用网络选项卡检查该内容。

- Santiago Benitez

---

这正是我所需要的。 :) - ProgDevCode

今天这解决了我的问题。 - linus

Answer 2

当发送请求时，您不需要将有效载荷转换为字符串。Axios会在发送请求时自动完成。

const dt = { data: { value: "gdfg1df2g2121dgfdg" }};
const request = axios.post(url, dt);

- Ken Labso

---

请编辑您的答案，包括解释如何解决问题。这将使答案更易于理解和对原始帖子以及未来的其他用户有用。谢谢。 - Nanhydrin

Answer 3

这对我来说有效。

const [formData, setFormData] = useState({ username: "", password: "" });

这是一个处理onsubmit事件的方法。

export const Login = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const from = location.state?.from?.pathname || "/home";
  const [formData, setFormData] = useState({ username: "", password: "" });
  const [error, setError] = useState("");

  const API = axios.create({
    baseURL: "http://localhost:9000",
  });

  const updateUserName = (e: any) => {
    setFormData({ ...formData, username: e.target.value });
  };

  const updatePassword = (e: any) => {
    setFormData({ ...formData, password: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const config = { headers: { "Content-Type": "application/json" } };
    try {
      const res = await API.post("/authenticate", formData, config).then(
        (res) => {
          console.log(res?.data);

          if (res?.data.token) {
            const token = res?.data.token;
            console.log("token: " + token);
            navigate(from, { replace: true });
          } else {
            console.log("incorrect submission");
            setError(res.data);
          }
        }
      );
    } catch (err) {
      if (!err) {
        setError("no server response");
      } else {
        setError("registeration failed");
      }
    }
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        User Name: <input type="text" onChange={updateUserName} />
        Password: <input type="text" onChange={updatePassword} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

- Abdul

Answer 4

使用 Axios 发送带有 JSON 请求体的 POST 请求：

  static async postService(path, data = {}) {
    const requestUrl = HttpRequest._getRequestUrl(path);

    try {
      const ret = await axios.post(requestUrl, JSON.stringify(data));
      console.log('Request result ', ret);
    } catch (error) {
      console.error(`Request error: ${error.message}`);
    }
  }

- Bruce Lee