[Frontend] axios/fetch headers utf8 한글 오류

내 2020년 글 백업 ・・・

---

Vue (js)로 Axios 통신을 하면서 Multipart File을 Body에 넘겨줘야했음.

그래서 다른 json 정보들은 Header에 담아보내주려고함..

 

근데 

Failed to execute 'setRequestHeader' on 'XMLHttpRequest': Value is not a valid ByteString

 

이런 에러가 뜨는 것 아닌가?..!@!!?

 

일단 나는 'XMLHttpRequest'를 선언한 적도 없는데 이런 오류가 뜨니 뭔가 싶었다

구글링해보면 다 Ajax 관련 해결법,,

 

이래저래 찾아보다가 알게된 사실은 헤더에는 utf8 적용이 안 된다는 것 --> 한글이 안보내짐

그래서 base64로 변환해서 보낸 후, 백에서 다시 utf8로 디코딩 하면 된다고 함

 

이거 할라고 몇 시간을 날렸는지 ㅠ

헤더에 한글 넘길 생각하는 사람이 없나봄.ㅎㅎ

---

프론트에서 Encoding 하는 코드

 axios.post("http://localhost:8081/uploadAudio", audio,
          { headers : {
            'code' : btoa(unescape(encodeURIComponent(this.$store.state.code))),
            'token' : this.$cookies.get('token')
            }})

 

btoa(unescape(encodeURIComponent('한글')))

이렇게 하면 한글이 base 64로 인코딩 된다

 

 

---

백에서 Decoding 하는 코드

import java.util.Base64;
import java.util.Base64.Decoder;

...

@PostMapping("/uploadAudio")
    public ResponseEntity upload (@RequestHeader final Map<String, Object> info,
           @RequestParam (value = "audio") final MultipartFile file) throws Exception {

        String code = (String) info.get("code");
        String token = (String) info.get("token");

        // Base64 to utf8 
        Decoder decoder = Base64.getDecoder();
        byte[] decodedBytes = decoder.decode(code);
        code = new String(decodedBytes, "UTF-8");
        System.out.println(code);
... }