axios post request with json data

axios post request with json data

axios JS 라이브러리를 이용하여 post json request를 보내고 있는데 서버에서 아무것도 받지 못하고 있습니다.여기 내 코드가 있습니다.

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

json 형식으로 post raw body를 보내야 합니다.

기본적으로 axios는 데이터 게시에 Json을 사용하므로 데이터를 문자열화할 필요가 없습니다.문제는 당신이 그렇게 하고 있다는 것일 수도 있습니다.그거 빼고 포스트 해보고 작동하는지 확인해줄 수 있나요?또한 데이터가 서버에 있는 개체의 형식이 아니면 데이터를 감쌀 필요가 없습니다.그렇지 않으면 제가 좀 더 문맥을 잡을 수 있도록 요청서 본문이 어떻게 생겼는지 정보를 주실 수 있나요?네트워크 탭을 사용하여 크롬 개발 도구에서 확인할 수 있습니다.

페이로드를 줄로 묶을 필요는 없습니다.Axios가 요청이 오면 대신 해줄 것입니다.

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

저는 이게 통했어요.

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

그리고 이건 제출 손잡이 방식입니다.

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>
  );
};

json을 본체로 하는 게시물 요청 액시오스:

  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}`);
    }
  }

언급URL : https://stackoverflow.com/questions/42958431/axios-post-request-with-json-data