vue axios 가 post 로 제출 한 데이터 형식 을 자세히 설명 합 니 다.

vue 프레임 워 크 는 axios 를 사용 하여 ajax 요청 을 보 내 는 것 을 추천 합 니 다.전에 저 는 블 로그 한 편 을 써 서 vue 구성 요소 에서 axios 를 어떻게 사용 하 는 지 설명 한 적 이 있 습 니 다.그런데 예전 에 놀 때 get 요청 을 했 는데 지금 은 제 가 블 로 그 를 만 들 때 post 방법 을 사 용 했 는데 백 스테이지(node.js)에서 프론트 에서 들 려 오 는 인 자 를 전혀 받 지 못 하 는 것 을 발 견 했 습 니 다.나중에 탐색 을 한 후에 마침내 문제 의 소 재 를 발견 했다.
post 제출 데이터 의 네 가지 인 코딩 방식
1.application/x-www-form-urlencoded
이것 은 가장 흔히 볼 수 있 는 post 인 코딩 방식 일 것 입 니 다.일반적인 폼 은 기본적으로 이 방식 으로 제출 합 니 다.대부분의 서버 언어 는 이런 방식 에 대해 좋 은 지 지 를 가지 고 있다.PHP 에서$사용 가능POST["key"]방식 으로 key 의 값 을 가 져 옵 니 다.node 에서 query string 미들웨어 를 사용 하여 파 라 메 터 를 분리 할 수 있 습 니 다.

app.post("/server",function(req,res){
 req.on("data",function(data){
  let key=querystring.parse(decodeURIComponent(data)).key;
  console.log("querystring:"+key)
 });
});

2.multipart/form-data
이것 도 흔히 볼 수 있 는 post 데이터 형식 입 니 다.폼 으로 파일 을 업로드 할 때 form 폼 의 enctype 속성 이나 ajax 의 contentType 인 자 를 multipart/form-data 와 같 게 해 야 합 니 다.이 인 코딩 형식 을 사용 할 때 배경 으로 보 내 는 데 이 터 는 이렇게 생 겼 습 니 다.
 
서로 다른 필드 는 --boundary 으로 시작 하여 내용 설명 정보 이 고 마지막 으로 필드 의 구체 적 인 내용 이다.파일 을 전송 했다 면 파일 이름과 파일 형식 정 보 를 포함 해 야 합 니 다.
3.application/json
axios 기본 제출 은 이 형식 을 사용 합 니 다.이러한 인 코딩 방식 을 사용 하면 배경 에 전 달 된 것 은 직렬 화 된 json 문자열 입 니 다.우 리 는 application/json 과 application/x-www-form-urlencoded 가 보 낸 데 이 터 를 비교 할 수 있 습 니 다.
우선 application/json:
 
다음은 application/x-ww-form-urlencoded:
 
애플 리 케 이 션/x-ww-form-urlencoded 가 배경 에 올 린 데 이 터 는 key-value 형식 으로 조직 되 었 고 애플 리 케 이 션/json 은 직접 json 문자열 임 을 알 수 있 습 니 다.애플 리 케 이 션/json 을 처리 할 때 배경 에 애플 리 케 이 션/x-ww-form-urlencoded 에 대응 하 는 방식 을 사용 하면 문제 가 생 길 수 있 습 니 다.예 를 들 어 백 스테이지 node.js 는 예전 에 application/x-ww-form-urlencoded 에 대처 하 는 방법 을 사 용 했 습 니 다.그러면 querystring.parse(decodeURIComponent(data)) 이후 에 얻 은 데 이 터 는 이 렇 습 니 다.
 
이 럴 때 querystring.parse(decodeURIComponent(data)).key 에서 undefined 만 얻 을 수 있 습 니 다.
4.text/xml
나머지 인 코딩 형식 은 text/xml 입 니 다.이 형식 을 저 는 별로 사용 한 적 이 없습니다.
해결 방법
axios post 방법 이 기본적으로 application/json 형식 으로 데 이 터 를 인 코딩 하 는 것 을 알 고 있 는 이상 해결 방안 은 두 가지 가 있 습 니 다.하 나 는 배경 에서 수신 파 라 메 터 를 바 꾸 는 방법 이 고,다른 하 나 는 axios post 방법의 인 코딩 형식 을 application/x-ww-form-urlencoded 로 바 꾸 는 것 입 니 다.배경 에서 어떤 수정 을 할 필요 가 없습니다.
일단 첫 번 째 해결 방법 을 보 겠 습 니 다.
vue 구성 요소 에서 axios 가 post 요청 을 보 내 는 코드 는 다음 과 같 습 니 다.

this.$axios({
 method:"post",
 url:"/api/haveUser",
 data:{
  name:this.name,
  password:this.password
 }
}).then((res)=>{
 console.log(res.data);
})

이때 콘 솔 Network Headers 의 정 보 는 이 렇 습 니 다.
 
배경 수신 데 이 터 는 body-parser 미들웨어 에 의존 해 야 합 니 다.우 리 는 미리 설치 한 다음 에 배경 코드 에서 body-parser 를 참조 합 니 다.
 
이 캡 처 에서 역할 을 발휘 하 는 코드 는 const bodyParser=require("body-parser"); 에 불과 하 다.
다음은 경로 에서 body-parser 를 사용 합 니 다.

app.post("/api/haveUser",bodyParser.json(),function(req,res){
 console.log(req.body);
 let haveUser=require("../api/server/user.js");
 haveUser(req.body.name,req.body.password,res);
});

이 때 현재 데스크 톱 에서 post 요청 을 보 내 면 백 스테이지 콘 솔 에서 req.body 이 인쇄 됩 니 다.
 
이때 req.body.name 또는 req.body.password 을 통 해 해당 하 는 값 을 얻 을 수 있다.
이런 방법 은 비교적 간단 하고 프런트 에서 너무 많은 수정 을 할 필요 도 없 으 니 이런 방법 을 추천 합 니 다.
두 번 째 해결 방법 은 구체 적 으로 다음 과 같다.
전단

this.$axios({
 method:"post",
 url:"/api/haveUser",
 headers:{
  'Content-type': 'application/x-www-form-urlencoded'
 },
 data:{
  name:this.name,
  password:this.password
 },
 transformRequest: [function (data) {
  let ret = ''
  for (let it in data) {
   ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  return ret
  }],
}).then((res)=>{
 console.log(res.data);
})

그 중에서 관건 적 인 역할 을 발휘 하 는 것 은 headers 와 transformRequest 이다.이 중 headers 은 보 낼 사용자 정의 요청 헤 더 를 설정 합 니 다.transformRequest 은 서버 에 보 내기 전에 요청 데 이 터 를 수정 할 수 있 습 니 다.이렇게 조작 한 후에 백 스테이지 querystring.parse(decodeURIComponent(data)) 에서 얻 은 것 은 { name: 'w', password: 'w' } 과 유사 한 대상 이다.배경 코드 는 다음 과 같 습 니 다.

app.post("/api/haveUser",function(req,res){
  let haveUser=require("../api/server/user.js");
  req.on("data",function(data){
   let name=querystring.parse(decodeURIComponent(data)).name;
   let password=querystring.parse(decodeURIComponent(data)).password;
   console.log(name,password)
   haveUser(name,password,res);
  });
});

이런 방법 은 분명히 첫 번 째 것 보다 좀 번 거 롭 지만 백 스테이지 에서 너무 많이 처리 할 필 요 는 없다.그래서 구체 적 인 조작 은 실제 상황 에 따라 결정 해 야 한다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.