CORS 오류 및 API 연결 오류

들어가며

해커톤을 통해 백엔드와 협업을 하며 api 연결하는게 처음임과 동시에, 명세서를 받은 후 api 연결하는 법을 알아보고 싶어 글을 쓰게 되었다. 또한 배포과정에서 계속해서 CORS 오류가 떠 해결하고자 한 방법들을 적어가며 상기시키기 위해 글을 작성하였다.

문제점

1️⃣ CORS 에러

2️⃣ api 연걸 안됌

해결방법

1️⃣ CORS를 해결하기 전에 우선 프록시부터 알아보자.

프록시(Proxy)란 무엇인가?

프록시(Proxy)는 클라이언트와 서버 사이에 위치하여 요청과 응답을 중계하는 서버 또는 소프트웨어를 말합니다. 프록시는 클라이언트의 요청을 받아 실제 서버로 전달하고, 서버의 응답을 다시 클라이언트로 전달하는 역할을 합니다.

프록시의 주요 역할

1. 중계

   클라이언트의 요청을 받아서 실제 서버로 전달하고, 서버의 응답을 받아 클라이언트에게 전달하는 역할

2. 보안

   프록시는 클라이언트와 서버 간의 직접적인 통신을 차단하여 보안을 강화할 수 있다.

   예를 들어, 클라이언트의 IP 주소를 숨기거나, 특정 요청을 차단할 수 있다.

3. 캐싱

   자주 요청되는 데이터를 캐싱하여 서버의 부하를 줄이고 응답 속도를 높일 수 있다.

4. 로드 밸런싱

   여러 서버에 걸쳐 요청을 분산하여 서버의 부하를 고르게 분산시킬 수 있다.

5. CORS 우회

   클라이언트와 다른 도메인 간의 통신에서 발생하는 CORS(Cross-Origin Resource Sharing) 문제를 해결할 수 있습니다.

proxy: {
      '/api': {
        target: 'https://k1c436ba7077fa.user-app.krampoline.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        secure: false,
        ws: true,
      },
    },

vite.config.js 파일에 추가하여 프록시 설정을 통해 CORS 오류를 해결하는 방법이다. 이 설정은 개발 환경에서 프론트엔드 애플리케이션이 백엔드 API 서버와 통신할 때 발생할 수 있는 CORS 문제를 해결하는 데 사용된다.

옵션 설명

• /api:
  • 프록시 설정을 적용할 경로를 지정. /api로 시작하는 모든 요청이 프록시를 통해 전달
• target:
  • 프록시할 대상 서버의 URL을 지정. 여기서는 https://k1c436ba7077fa.user-app.krampoline.com이 대상 서버
  • 프론트엔드에서 /api로 시작하는 요청은 모두 이 URL로 전달
• changeOrigin:
  • true로 설정하면, 프록시 요청의 호스트 헤더가 대상 URL의 호스트로 변경. 이는 일부 서버에서 호스트 헤더를 기반으로 요청을 처리하는 경우 유용
• rewrite:
  • 경로 재작성 기능을 정의하는 함수. 여기서는 요청 경로에서 /api 제거하고 젇날하는 역할.
  • 예를 들어, /api/users 요청은 프록시를 통해 https://k1c436ba7077fa.user-app.krampoline.com/users로 전달.
• secure:
  • false로 설정하면, SSL 인증서가 자체 서명된 경우에도 프록시를 통해 요청을 허용.
• ws:
  • true로 설정하면 웹소켓 프록시를 활성화 하는 역할. 웹소켓 연결을 프록시하려는 경우 필요로 함.

이 설정을 통해 개발 서버는 /api로 시작하는 모든 요청을 지정된 대상 서버로 프록시하고, CORS 문제를 해결하는 방법이다.

2️⃣ api 연결 오류 해결

전에 연결한 코드는 asnyc/await 을 사용하지 않은 Promise 로만 연결을 했다. 코드의 가독성이 좋지 않아 async/await 을 사용하여 코드의 가독성을 첫번째로 높였다.

const handleClickOnBtn = async () => {
    try {
      const data = axios.post('/api/v1/quiz', {
        keywords: [
          { keyword: selectedCategory[0] },
          { keyword: selectedCategory[1] },
          { keyword: selectedCategory[2] },
        ],
      });
      console.log(data);
    } catch (err) {
      console.log(err);
    }
  };

fullfiled 뜬 이유는 async/await 처리를 하면서 await을 넣지 않은 문제였다.

→ 다시 await 넣고 처리해봤다.

---

await 처리 했더니 html이 넘어왔다.

서버에 값이 제대로 도착을 안해서 HTML 문서를 다 반환하는거다.

const handleClickOnBtn = async () => {
    try {
      const data = await axios.post('/api/v1/quiz', {
        keywords: [
          { keyword: selectedCategory[0] },
          { keyword: selectedCategory[1] },
          { keyword: selectedCategory[2] },
        ],
      });
      console.log(data);
      const quizId = data.code;
      console.log(quizId); // undefiend

---

하지만 코드를 잘 보면 axios.post를 해준것을 볼 수있다. 여기서 html만 넘어온 문제점을 확인할 수 있다. async/await 로 코드를 리펙토링 하다가 따로 만들어놓은 axios.create 을 불러오지 않은것이다.

axios.create 를 사용하지 않아 baseURL 지정이 되지 않았고, 결국 console.log 에는 HTML 을 뱉는 모습을 볼 수 있었다.

import axios from 'axios';

export const api = axios.create({
  // 크램플린 배포 BASE_URL
  baseURL: import.meta.env.VITE_APP_BASE_URL,
});