[React] authentication 에러

❌에러 상황

import qs from 'qs';
import axios from "axios";

axios.defaults.baseURL = "http://127.0.0.1:8000/";
axios.defaults.paramsSerializer = params=>{
    return qs.stringify(params);
};

현재 위와 같이 axios의 url parameter 설정을 해주었다.
그 후 param과 header를 보내면 parameter는 인식하는데 header의 token정보를 인식하지 못한다.

let params = {category:category};

axios.get('/post/',{params},
          {headers:{Authorization:`Bearer ${accessToken}`}})

✔ 해결방안 1

우선 내 생각에는 get method는 body를 보낼 필요가 없기 때문에 매개 변수의 개수로 인해 인식하지 못하는게 아닌가 했다.

axios.get(`/post/?category=${category}`,
          {headers:{Authorization:`Bearer ${accessToken}`}})

위와 같은 방식으로 하니 해결!

만약 parameter를 여러개 전송하고 싶다면 &로 연결해줘야한다.
parameter개수는 생각하지 않고 그냥 ?로 붙여서 에러가 발생했는데 찾는데 한참 걸렸다..

axios.get(`/post/?category=${category}&param2=${param2}`,
          {headers:{Authorization:`Bearer ${accessToken}`}})

✔ 해결방안 2

1번 방법으로 해결하고 찾은 방법이다.

let config = {
            headers:{Authorization:`Bearer ${accessToken}`},
            params:{
                category:category
            }
        }
axios.get('/post/',config)

아주 잘 작동한다.!!