axios의 위험성

스터디를 진행하던 중 프론트와 백엔드 연동에서 axios라이브러리의 위험성을 많이 느꼈다. 크롬 등 웹브라우저에서 자동으로 해주는 것이 많았기 때문에 사용자가 당연히 될 거라고 생각한 것들이 axios다른 방식으로 해주는 것들이 있었다.

 

기억에 남는 것은 2가지 사례가 있었다. 

 

1. axios content-type에 맞는 사용방법

axios 공식문서: https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

axios에서 form-data를 사용할 때 공식문서 가이드에 맞게 사용해야한다.

const axios = require('axios');

let params = new URLSearchParams()
params.append(<field1>, <value>)
params.append(<field2>, <value>)

axios.post(<url>, params)
    .then((response) => {
        console.log("Success");
        console.log(response.status);
        console.log(response.headers);
    }).catch((error) => {
        console.log("error");
        console.log(error.response.status);
    });

 

2. http프로토콜 301응답

http프로토콜에서 301응답을 받으면 http 헤더 location필드에 리다이렉트해야하는 주소가 있다. 웹 브라우저는 301응답을 받으면 location필드로 자동으로 요청을 날려주는데, axios는 location으로 리다이렉트를 할 때 GET메소드를 사용하여 리다이렉트된다.

문제는 POST API로 리다이렉트 될때 GET API로 리다이렉트된다. 결국, 원하는 요청으로 가지 않아 응답을 못받게 된다.