jwt - req.headers.authorization이 undefined인 에러

✋ 에러코드

Uncaught TypeError: Cannot read property 'split' of undefined

🤦‍♂️ 상황

브라우저에서 localhost:3000/api/articles로 접근하면, 위와 같은 에러가 발생했다.

localhost:3000/api/articles의 라우터

router.get('/', async (req, res) => {
  // 클라이언트에서는 header의 Authorization에 토큰을 넣어서 보냈다.
  // console.log('req.header어쩌구 저쩌구',req.headers.authorization); // undefined
  const token =  req.headers.authorization.split('Bearer ')[1];
  console.log('클라이언트에서 보낸 토큰 - ', token);
 // ...
 ...
 }

 

req.headers.authorization이 undefined이기 때문에 undefined를 split을 하니 에러가 발생하는 것이다.

👍 원인 & 해결

1. 내가 만든 토큰은 로그인을 하면 localStorage에 저장된다.

localStorage에 저장된 토큰

2. 토큰은 list.html에서 api에 데이터를 요청(GET)할 때, 같이 보내야만 데이터를 줄수있도록 하기위해서 사용한다.

 

3. localStorage에 저장된 토큰을 list.html에서 꺼내서 변수에 저장한 후에, 토큰을 localhost:3000/api/articles GET방식으로 headers에 넣어서 전달한다. 

 $.ajax({
        url: 'http://localhost:3000/api/articles',
        type: 'GET',
        // 브라우저에서 서버로 인증 토큰을 던저줄때 설정
        // },
        // Bearer는 현재 보내는 토큰의 타입을 알려줌.
        headers: {
          Authorization: 'Bearer '+ storageToken
        },
        ...
        ...
       })

4. 즉, list.html을 통하지않고 내가 직접 localhost:3000/api/articles에 접근하면 headers에는 authorization 값이 존재하지않는다.

5. 따라서 req.headers.authorization은 undefined가 되고 split메서드를 사용하면 에러가 발생한다.