[TIL] 20230814 - CORS 서버오류/Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Error

Access to XMLHttpRequest at 'https://special-imported-homburg.glitch.me/likes?likedUserEmail=heejung2@naver.com' from origin 'https://dulleo-bomi.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

like 컴포넌트에서 usequery로 요청을 하는데

like 컴포넌트를 

map함수안에 사용해서생긴 오류였다.

{filteredCourseList.map((item) => {
  return (
    <St.CourseBox key={item.crsIdx} onClick={() => goToDetail(item.crsKorNm)}>
      <St.CourseTitBox>
        <St.CourseName>{item.crsKorNm}</St.CourseName>
        <Like crsName={item.crsKorNm} crsId={item.crsIdx} />    // map함수 안에서 불려지는 Like 컴포넌트
      </St.CourseTitBox>
      <St.CourseInfo>
        {item.crsCycle} Lv.{item.crsLevel}
      </St.CourseInfo>
      <St.CourseInfo>{item.sigun}</St.CourseInfo>
      <St.CourseInfo>
        {item.crsContents
          .replace(/[<br>'-]/g, '')
          .split('-')
          .join('')}
      </St.CourseInfo>
    </St.CourseBox>
  );
})}

Like 컴포넌트에서 useQuery 사용

const { data } = useQuery(['likes', crsId], getLikes);

반복되는map 안에서 비동기 함수 요청하면안된다. map돌면서 계속 요청되기 때문에

상위 컴포넌트에서 불러와서 프롭스로 내려줘서 써야한다

또한 여러번 광클릭을 하면 한번에 많은양의 요청이 들어가면 이또한 서버에서 막을 수 있다.

그래서 오류 현상이 나타낫다 안나타낫다.

 const { data: likes } = useQuery(['likes'], getLikes);
 
 .
 .
 .
 <St.CourseListContainer>
 {filteredCourseList.map((item) => {
  return (
    <St.CourseBox key={item.crsIdx} onClick={() => goToDetail(item.crsKorNm)}>
      <St.CourseTitBox>
        <St.CourseName>{item.crsKorNm}</St.CourseName>
        <Like crsName={item.crsKorNm} crsId={item.crsIdx} likeList={like} />
      </St.CourseTitBox>
      .
      .
      .

이렇게 상위 컴포넌트에서 불러와서 porps로 내려줘서 사용해야한다