[네트워크/HTTP] 페이로드(Payload)란? - 하나몬
페이로드(Payload)란 무엇일까? 페이로드(payload)는 전송되는 데이터를 의미한다. 데이터를 전송할 때, 헤더와 메타 데이터, 에러 체크 비트 등과 같은 다양한 요소들을 함께 보내어, 데이터 전송의
hanamon.kr
문제상황)
400에러가 난다..
400에러는 뭔가 보내주는 값이 잘못됐다는 것 같은데..
백엔드 코드는 requestParam으로 파일이름만을 받아야 하는거고..
request Payload에서 어떤 값을 백으로 보내주고 있는지 확인해보자.
파일 이름 잘 보내주고 있는것 같은데...
정확하게 어떤 값을 보내주고 있는건지 모르겠다.
그래서 콘솔창에 네트워크 창을 열어서 확인해봤다.
request Payload가 백엔드로 보내주는 데이터 값이라고 한다.
파일 이름만 보내주는거니까 잘 보내주고 있는것 같은데..
저 파일이름이 requestParam으로 보내주고 있는게 맞는지 모르겠다.
한번 확인해보자.
시도해보자)
https://wakestand.tistory.com/704
자바스크립트 ajax 파라미터 넘기는 받는 방법
먼저 자바스크립트에서 ajax를 사용해서 자바 Controller 파일에 특정 값(Parameter)을 넘겨주려는 경우에는 ajax에 data를 사용해서 넘겨주면 되는데 위에서 사용한 코드는 아래와 같다 이후 Contrller 에
wakestand.tistory.com
ajax에서 백으로 데이터 넘길때, json으로 넘기면 백에서 requestParam 으로 바꿔주는건가..??
$.ajax({
type: "POST",
url: `http://localhost:8080/s3/preSignedURL`,
// dataType: "json",
dataType: "json",
// enctype: "multipart/form-data",
contentType: "application/json; charset=utf-8",
processData: false,
contentType: false,
beforeSend: function (xlr) {
xlr.setRequestHeader("Authorization", accessToken);
},
data: {
fileName: imageInput.files[0].name,
},
xhrFields: {
withCredentials: true, // 클라이언트와 서버가 통신할때 쿠키와 같은 인증 정보 값을 공유하겠다는 설정
},
success: function (response) {
console.log("preSignedURL : ", response);
// put 으로 이미지 넘기는 함수 실행
return imageUrlList;
},
error: function (request, status, error) {
console.log("에러난다..!");
console.log(request, status, error);
// "[requestPostBodyJson] : [error] : " + JSON.stringify(xhr);
},
});이렇게 해보자..!
->실패 안된다.
타입문제가 맞을까..?
[스프링] Spring Controller 컨트롤러 Ajax 데이터통신 유형 정리
Ajax Controller 데이터 통신 방법 정리를 위해 작성한다. (매번 삽질) @RequestParam 어노테이션을 활용하면, Request Header에 Parameter를 넣어서 전달 @RequestBody 어노테이션을 활용하면, Request Body에 Data를 넣
devmg.tistory.com
이 블로그에 requestParam으로 값받는거 나와있다...! 따라해보자..!
->이것도 아닌듯..ㅠㅠ
프론트는 에러메세지가 400만 딸랑주고 자세히 안알려줘서 속상해 하고 있는데
네트워크 탭에서 이런걸 발견했다.
우와웅 에러메세지가 자세히 나와있잖아..!? 좋다좋다..
역시 내 예상이 맞았어. 파라미터로 'fileName'의 requestParam을 받아야 하는데 딸랑 파일이름만 줘서 몰랐던거야
원인을 찾았으니까 다시 시도해보자..
Required request parameter 'linkId' for method parameter type String is not present
Required request parameter 'linkId' for method parameter type String is not present 발생 원인 요청 쿼리 스트링에 'linkId' 필드가 없게 되면서 메소드 매개변수 유형 문자열에 대한 필수 요청 매개변수 'linkId'가 없다
youn0111.tistory.com
->음... 왜 안되는거지..(실패)
https://hoonys91.tistory.com/335
@RequestParam() - 특정 파라미터 값만 받고 싶은 경우
브라우저에서 요청 URL에 Parameter에 따라 맞는 PageController Method를 사용하고 싶으면 @RequestParam Annotaion을 이용하면 된다. 사용방법 01. @RequestParam("변수명") 변수타입 변수명 @GetMapping(value="m1") @Response
hoonys91.tistory.com
->이걸로 시도해보자.. (실패)
https://stackoverflow.com/questions/27724723/required-string-parameter-username-is-not-present
Required String parameter 'userName' is not present
I am trying to make an AJAX call from java script console as below jQuery.ajax({ contentType: "application/json", url: "/accountServices/resetPassword", type: "POST", data: '{ "use...
stackoverflow.com
->이걸로 시도해보자..!
똑같이 했는데 왜 안되지....ㅠㅠ
Required String parameter is not present error in Spring MVC
I try to make an AJAX query to my controller in Spring MVC. My action code is: @RequestMapping(value = "events/add", method = RequestMethod.POST) public void addEvent(@RequestParam(value = "start...
stackoverflow.com
여기 조언대로 RequestBody 어노테이션으로 해보자..!
이걸로 에러가 바꼈다..!
자바스크립트에서 [object Object] 가 대체 뭘까?
Object.prototype.toString 에 대한 깊은 설명
medium.com
-> 어려워서 잘 이해는 안되지만, 다른 블로그 들을 같이 봤을때, 맥락상
[object Object] 는 Json 객체를 그냥 넘길때 나오는 것 같다.
자바스크립트 객체를 그냥 넘길 때 [Object Object]로 표시되는 경우
자바스크립트 객체를 그냥 넘길 때 [Object Object]로 표시되서 어떤 값인지 확인할 수 없다. JSON.stringify()를 사용하면 자바스크립트 객체를 문자열로 변환해줘서 어떤 값이 있고 그 변화를 추적하기
higugu.tistory.com
https://hiworldbye.tistory.com/48
json 형태의 [object Object] 출력하기
json 형태의 object 변수인 myObj 가 있다고 치자 이것을 JS에서 alert나 console.log로 찍고싶을때alert(myObj); 로만 찍으면 [object Object] 라고 나온다.myObj의 속 내용을 알고 싶다면 alert(JSON.stringify(myObj));라고
hiworldbye.tistory.com
->오..! 이방법으로 하니까 해결됐다..!
문제 해결)
json파일을 넘길 때는
@RequestParm어노테이션보단
@RequestBody어노테이션을 쓰는게 낫고,
리퀘스트 파람은 주로 POST 메서드보다 GET메서드에서 많이 쓰이는 것 같다.
( 왜 그런지는 좀 더 찾아봐야 알겠지만.. 시간 관계상 나중에 찾아보도록 하자..아 진짜 리퀘스트파람은 프론트에서 어떤식으로 값을 보내주지..? 너무 궁금하긴 한데..! 일단 오늘 하기로 한 일은 끝내야하기 때문에.. 넘어가는게 아쉽다. 주말에 꼭 찾아봐야지..!! 잊어먹지말자..📌)
ajax에서 값을 이렇게 넘기면 [object Object] 에러가 뜨기 때문에
$.ajax({
type: "POST",
url: `http://localhost:8080/s3/preSignedURL`,
// dataType: "text",
// enctype: "multipart/form-data",
contentType: "application/json; charset=utf-8",
processData: false,
contentType: false,
beforeSend: function (xlr) {
xlr.setRequestHeader("Authorization", accessToken);
},
data: { fileName: "asdas.png" },
xhrFields: {
withCredentials: true, // 클라이언트와 서버가 통신할때 쿠키와 같은 인증 정보 값을 공유하겠다는 설정
},
success: function (response) {
console.log("preSignedURL : ", response);
// put 으로 이미지 넘기는 함수 실행
return imageUrlList;
},
error: function (request, status, error) {
console.log("에러난다..!");
console.log(request, status, error);
// "[requestPostBodyJson] : [error] : " + JSON.stringify(xhr);
},
});보내는 data를 JSON.stringify()로 감싸주어야 한다.
(수정한 ajax)
$.ajax({
type: "POST",
url: `http://localhost:8080/s3/preSignedURL`,
// dataType: "text",
// enctype: "multipart/form-data",
contentType: "application/json; charset=utf-8",
processData: false,
contentType: false,
beforeSend: function (xlr) {
xlr.setRequestHeader("Authorization", accessToken);
},
data: JSON.stringify({ fileName: "asdas.png" }),
xhrFields: {
withCredentials: true, // 클라이언트와 서버가 통신할때 쿠키와 같은 인증 정보 값을 공유하겠다는 설정
},
success: function (response) {
console.log("preSignedURL : ", response);
// put 으로 이미지 넘기는 함수 실행
return imageUrlList;
},
error: function (request, status, error) {
console.log("에러난다..!");
console.log(request, status, error);
// "[requestPostBodyJson] : [error] : " + JSON.stringify(xhr);
},
});이렇게 했더니 presignedURL이 잘 출력되었다.
느낀점)
캬흐..!
이번엔 누구한테 물어보지 않고 스스로 문제를 해결해냈다...!! 너무나 뿌듯한 값진경험..!