[Team 제주 넘는 차] 차 정렬 페이지 api 연동 시 오류 'Cannot set properties of undefined (setting 'accesstoken')'

거의 3일 내내 쩔쩔 맨 오류

 

store/apiUtil.js 파일에서 뭔가 오류가 난 건 알겠는데 어느 부분이 문제인지 아예 감도 못잡았었다.

// store/apiUtil.js

import axios from 'axios'

const api = axios.create()

// request(요청)시 아래의 로직이 인터셉트 된다.
api.interceptors.request.use(
  async request => {
    // header.token 전송
    const token = window.localStorage.getItem('accessToken')
    request.data.accesstoken = token

    return request
  },
  async error => {
    return Promise.reject(error)
  }
)

// response(응답)시 아래의 로직이 인터셉트 된다.
api.interceptors.response.use(
  async response => {
    // data.token 자동 갱신
    const token = response.data.accessToken // token을 data에서 받은 경우
    if (token) {
      window.localStorage.setItem('accessToken', token)
    } else if (typeof token == 'undefined') {
      return response
    }
    return response
  },
  async error => {
    return Promise.reject(error)
  }
)

export default api

 

결국 질문드리고 얻은 답변은 response를 콘솔로 찍어보라는 것이었다.

그래서 찍어봤더니 콘솔이 제대로 안찍혀서 이건 request에서 아예 못받는 문제인 걸로 보여 request를 찍어봤다.

 

봤더니 data가 아예 안보여서 혹시 다른 곳에 담아줘야하나 싶어서 headers.head로 위치를 바꿔줬다.

import axios from 'axios'

const api = axios.create()

// request(요청)시 아래의 로직이 인터셉트 된다.
api.interceptors.request.use(
  async request => {
    // header.token 전송
    const token = window.localStorage.getItem('accessToken')
    console.log('accessToken', request)
    // request.data.accesstoken = token
    request.headers.head.accesstoken = token
    console.log('accessToken', request)

    return request
  },
  async error => {
    return Promise.reject(error)
  }
)

// response(응답)시 아래의 로직이 인터셉트 된다.
api.interceptors.response.use(
  async response => {
    console.log('response', response)
    // data.token 자동 갱신
    const token = response.data.accessToken // token을 data에서 받은 경우
    if (token) {
      console.log('apiUtil Token', response)
      window.localStorage.setItem('accessToken', token)
    } else if (typeof token == 'undefined') {
      console.log('apiutil', response)
      return response
    }
    return response
  },
  async error => {
    return Promise.reject(error)
  }
)

export default api

결과

잘 담겨서 왔다.