[Vue.js] axios를 사용한 HTTP 통신, CORS

REST API

• URI(자원)와 HTTP 메소드(행위)를 이용해 객체화 된 서비스에 접근하는 것
• 클라이언트의 상태를 저장하지 않으며, 종류에 제한을 두지 않음
• GET, POST, PUT, DELETE, PATCH, ...

axios

• Promise 기반의 HTTP 클라이언트 자바스크립트 라이브러리

// GET 요청
axios.get(url[, config])

// POST 요청
axios.post(url[, data[, config]])

// PUT 요청
axios.put(url[, data[, config]])

// DELETE 요청
axios.delete(url[, config])

// PATCH 요청
axios.patch(url[, data[, config]])
...

응답 스키마

{
  // `data`는 서버가 제공하는 '객체 형태' 응답입니다.
  data: {},

  // `status`는 HTTP 상태 코드입니다.
  status: 200,

  // `statusText`는 HTTP 상태 메시지입니다.
  statusText: 'OK',

  // `headers`는 HTTP 헤더입니다.
  // 모든 헤더 이름은 소문자이며, 괄호 표기법을 사용하여 접근할 수 있습니다.
  // 예시: `response.headers['content-type']`
  headers: {},

  // `config`는 요청을 위해 `Axios`가 제공하는 '객체 형태' 구성입니다.
  config: {},

  // `request`는 이번 응답으로 생성된 요청입니다.
  // 이것은 node.js에서 마지막 ClientRequest 인스턴스 입니다.
  // 브라우저에서는 XMLHttpRequest입니다.
  request: {}
}

Promise 방식, async/await 방식

// Promise 방식 => 비동기 작업을 체인으로 연결, 여러 비동기 작업을 병렬로 처리할 때 유용
axios.get(url)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => { // 에러 처리
    console.error(error);
  });


// async/await 방식 => 동기 코드와 유사한 구조로 더 직관적, 순차적인 비동기 작업에 더 적합
async function getData() {
  try {
    const response = await axios.get(url);
    console.log(response.data);
  } catch (error) { // 에러 처리
    console.error(error);
  }
}

---

CORS(크로스 오리진)

• Cross-Origin Resource Sharing의 약자이다. 브라우저에서 다른 출처의 리소스를 공유하는 방법

 

CORS 정책 위반 문제 예시

• 브라우저는 교차 출처 HTTP 요청 시 Origin 헤더를 추가
• 브라우저의 오리진과 동일한 오리진을 가진 서버일 때만 통신 가능
• 다른 오리진의 서버와 통신을 허용하지 않기 때문에 생기는 문제

해결 방법

• 백엔드 API 서버측에서 CORS 기능 제공
• 프론트엔트 어플리케이션을 호스팅하는 웹서버에 프록시를 설치, 설정

Proxy를 이용한 우회

• Proxy : 클라이언트와 서버 사이에서 중계 역할을 하는 서버

0. 작동 원리
1. 클라이언트의 요청을 동일 출처의 프록시 서버가 받음
2. 프록시 서버가 실제 API 서버로 요청을 전달
3. API 서버의 응답을 프록시 서버가 클라이언트에게 전달

코드 예시

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': { // 프록시할 경로 패턴
        target: 'http://localhost:3000',// 실제 API 서버 주소
        changeOrigin: true, // 호스트 헤더 변경 여부
        rewrite: (path) => path.replace(/^\/api/, '') // URL 경로 재작성 규칙
      }
    }
  }
})

---

참고자료

• ITYL 6기 수업자료
• https://velog.io/@freesian12/Fetch-%EC%99%80-Axios
• https://axios-http.com/kr/docs/res_schema
• https://velog.io/@hoo00nn/CORSCross-Origin-Resource-Sharing-%EB%9E%80
• https://c17an.netlify.app/blog/front-end/CORS_%EB%9E%80/article/