프론트엔드 성능 최적화: XMLHttpRequest 대신 fetch 인터페이스를 도입

작은 쓰레기 같은 놈들 · 게시됨 2026. 3. 2. 오전 9:02:01

요구사항: 동종 기원의 경우, 프론트엔드는 백엔드 인터페이스에 GET 및 POST 요청을 보냅니다. 인터페이스가 공개되어 있어 인증 정보를 담을 필요가 없습니다. 예를 들어, 쿠키 정보를 요청하거나 XMLHttpRequest를 사용할 때 어떻게 구성되었든 요청 쿠키 정보를 삭제할 수 없어 요청 패키지의 내용이 커지고, 파싱에 백엔드 자원이 낭비되어 의미가 없습니다.

네이티브 XMLHttpRequest를 사용하든, jQuery의 Ajax를 사용해 백엔드에 요청을 보내든, 상동 요청의 경우 쿠키 정보는 삭제할 수 없으며, 코드는 다음과 같습니다:

로그인이 보이네요.

왜냐하면withCredentials는 도메인 간 교차를 위해 설계되었습니다。 아래에 나와 있습니다:

또는 쿠키를 들고 다니면서 자원 대역폭과 백엔드 자원을 낭비하는 경우도 있습니다。

fetch로 수정한 후 코드는 다음과 같습니다:

로그인이 보이네요.

자격 증명은 다음과 같이 구성됩니다:

생략: 요청에 자격 증명을 절대 보내지 말고, 응답에도 자격 증명을 포함하지 마세요.
동일 출신(기본값): 동일한 출발 요청을 포함하는 자격 증명만 전송됩니다.
포함: 도메인 간 접근을 위해서라도 자격 증명을 반드시 포함하세요.

테스트 요청, 매우 깔끔하고 신선한 느낌, 아래와 같습니다:

참조:하이퍼링크 로그인이 보입니다.

[JavaScript] 프론트엔드 성능 최적화: XMLHttpRequest 대신 fetch 인터페이스를 도입

관련 게시물