[웹개발 100일] Day 25 - 데이터 가져오는 API 요청 시의 CORS 에러 해결

 

 

 

벌써 100일 중 1/4이 지나갔다..!!

아직 3~4주차 계획 중 '파일 업로드' 기능 구현이 남았지만, 어떤 스토리지 서비스를 이용할지 아직 결정하지 못해서 우선은 5~6주차 계획으로 미리 넘어가려 한다.

 

 

그래서 오늘부터는 프론트엔드 기능 개발!

기본적인 UI/UX 화면 구성은 첫주차에 대부분 해놨으니 크게 할 일이 많지는 않을 것 같다.

다만 state 관리를 전혀 안 해놔서 컴포넌트끼리 다 정리하고 API 연결하는 데 시간이 많이 들 걸로 예상된다.

솔직히 이 부분은 예전에 해본 경험이 있어서 우습게 본 면이 없지 않은데, 우연찮게도 요즘 회사에서도 같은 작업을 해보니 이게 정말 끝이 없다.

생각보다 너무 오래 걸리고 생각도 많이 해야 되더라..

어쨌든 일단 시작.. 하다보면 언젠간 되겠지.

 

주말에 알아보다 만 클라우드 서비스는 아직 어떤 걸 사용할지 정하지 못 했다.

사실 아는 게 별로 없어서 일단은 그냥 지피티가 추천해주는 목록으로 도전해볼까 한다.

아직 배포 단계까지는 몇 주 남았으니까 계속 고민해 봐야겠다.
 
 

---

🚀 요약

작업 시간: 1시간
✅ UI 구축 작업 이어서

 

 

---

🚀 검색창 UI 개선

검색창 UI 약간 개선했다

 

 

다만 검색 밑에 데이터 리스트가 필요한데 API 요청 중 CORS 에러, 401 에러가 발생해서 아직 가져오는 데 성공을 못 했다.

CORS 에러는 아래와 같이 해결했다.

// CORS 설정 추가 (AllowReactApp 정책 생성)
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp",
        policy =>
        {
            policy.WithOrigins("http://localhost:5173")  // React의 로컬 서버 허용
                  .AllowAnyMethod()                      // GET, POST, PUT 등 모든 HTTP 메서드 허용
                  .AllowAnyHeader()                      // 모든 헤더 허용 (Authorization 포함)
                  .AllowCredentials();                   // 인증 정보(쿠키, JWT) 포함 가능
        });
});

// CORS 사용 설정 (반드시 `UseAuthorization()` 이전에 호출!)
app.UseCors("AllowReactApp");

 

 

---

지금 아직 로그인이 작동을 안 하는데 401 에러 해결하려면 프론트에서 토큰을 보내줘야 해서 내일부터는 이 부분 해결할 듯하다.