[💻 코드스테이츠 FE 44기]pre-project - 8일차

✔️ 시작

API 명세서를 받아 CORS문제를 해결하기 위해 Proxy설정을 진행해 봤다.

📍 CORS문제

마크업도 어느 정도 해결했고
API명세서도 나왔다 해서

CORS문제를 해결하기 위해 Proxy 설정을 하기로 했다.

vite로 진행을 했고 Ngrok로 API명세서를 받았다.

//vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/questions': {
        target : 'https://1517-59-11-30-105.ngrok-free.app',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/questions/, ''),
        secure: false,
      }
    }
  }
})

//App.jsx
 const getAPIData = () => {
    fetch('/questions/recent?page=0&size=10', {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Accept': 'application/json',
      },
    })
    .then(res => console.log(res))
    .then(data => console.log(data))
  }
  getAPIData()

이렇게 통신을 진행하는데 자꾸 에러가 발생했다..

콘솔창으로 뭔가 받아와 지는거 같은데
res.json()을하면

에러를 뱉어 낸다...

2시간 이상 붙잡았는데 결국 해결하지 못했다..ㅠㅠ

📍해결

Q&A란에 질문을 남기게 되었고 해당 문제에 대해 우선
Respones가 html형태인데 json으로 파싱해서 나는 오류라고 하셨다.

알고보니 Ngrok를 무료로 사용하 ㄹ경우 get 요청시 API명세서 화면이 아닌 ngrok화면으로 이동하는 이슈가 있었고 호출시 header에

'ngrok-skip-browser-warning':'true'
를 넣어 해결할 수 있었다...

또한 해당 답변 달리기 전 백엔드에 CORS 확인 요청도 했었다.

그래서 Proxy 설정은 필요 없게 되었다... 👀

✔️ Keep

• 포기하지 않고 이것저것 시도해 보려고 했다.
• 너무 풀리지 않으면 혼자 붙잡지 말고 바로 문의를 넣어 시간 단축을 했다.

✍️ Problem

• Ngrok 환경이 CORS부분에 대해 문제가 많다고 한다.
  - 이 부분을 제대로 인지하지 못 했다.
• Ngrok에 대해 구글링 했어야 했는데 Prosxy나 도메인 부분에 초점을 둔 거 같았다.

🚀 Try

• 내가 생각한 부분의 문제가 아니라면 다른 곳을 초점을 비춰보자.
• 1~2시간 이상 문제 해결을 못하면 바로 도움 요청을 해보자 (프로젝트에서 시간은 금🌟이다.)

✏️ 마치며

Proxy 설정은 잘 했는데 자꾸 안 되서
초반에 애를 먹었고 다른 부분에 문제인줄 알고
엄한 곳만 수정을 했다.

서버와의 통신 부분은 아직 많이 부족하다 느꼈다.

구글링을 하면서 설정 코드를 작성하는데도
이게 무슨 뜻인지 하나씩 검색해보면서 찾아봤던 거 같다.