[React] axios 요청할 때 http Method 별로 JWT 토큰을 headers에 넣어 보내는 방법

 

1. GET 요청

axios.get('https://example.com/api/data', {
  headers: {
    'Authorization': 'Bearer yourAccessToken',
    'Content-Type': 'application/json', // 예시 다른 헤더 추가
  },
})
.then(response => {
  // GET 요청 성공 처리
})
.catch(error => {
  // 오류 처리
});

get()의 두번째 인자에 넣는다.

 

2. POST 요청

axios.post('https://example.com/api/data', {
  data: 'someData',
}, {
  headers: {
    'Authorization': 'Bearer yourAccessToken',
    'Content-Type': 'application/json', // 예시 다른 헤더 추가
  },
})
.then(response => {
  // POST 요청 성공 처리
})
.catch(error => {
  // 오류 처리
});

post()의 세번째 인자에 넣는다. 두번째 인자인 데이터가 없다면 {}로 비워둔다.

 

3. PUT 요청

axios.put('https://example.com/api/data', {
  data: 'updatedData',
}, {
  headers: {
    'Authorization': 'Bearer yourAccessToken',
    'Content-Type': 'application/json', // 예시 다른 헤더 추가
  },
})
.then(response => {
  // PUT 요청 성공 처리
})
.catch(error => {
  // 오류 처리
});

put()의 세번째 인자에 넣는다. 두번째 인자인 데이터가 없다면 {}로 비워둔다.

 

4. DELETE 요청

axios.delete('https://example.com/api/data', {
  headers: {
    'Authorization': 'Bearer yourAccessToken',
    'Content-Type': 'application/json', // 예시 다른 헤더 추가
  },
})
.then(response => {
  // DELETE 요청 성공 처리
})
.catch(error => {
  // 오류 처리
});

delete()의 두번째 인자에 넣는다.

---

정리

{ headers: { Authorization: `Bearer ${jwtToken}`}}

get, delete는 두번째 인자에,

post, put은 세번째 인자에 위 코드를 넣으면 된다. 보낼 data가 없다면 {} 로 두번째 인자는 비워 둔다.