Ajax Load Error: ReferenceError: 'fetch'이(가) 정의 되지 않았습니다.

Ajax Load Error: ReferenceError: 'fetch'이(가) 정의 되지 않았습니다.

 

'fetch' 미정의 오류

▶ 1. 오류 현상

 - 환경 : Explorer 브라우저 11버전

 - 웹 개발시 ajax통신을 사용하게 되는데, XHR은 성능상, 그리고 JQuery는 추세상 사용하지 않기 때문에 Fetch를 사용하는 경우가 늘었었다.(현재는 Front개발을 잘 하지 않기 때문에 확인 해보지 않았다.)

   이에 Fetch를 이용한 라이브러리를 편하게 사용하거나, 개발할 경우 위와 같은 에러를 발견한 경우가 많을 것이라고 추측 된다.

 

 - 문제 해결 이전에 미리 적어 두지만 fetch는 Promise를 반환 하기때문에 혹시라도 하기 조치를 다 취해 보아도 해결되지 않은 경우 polyfill.js관련 문제일 수도 있으니 참고 하도록 하자.

※ 참고 : goddaehee.tistory.com/288

 

 - 참고 : IE에서는 모두 기본적으로 지원 하지 않음

 

▶ 2. 해결 방법

 - Fetch를 정상적으로 사용할 수 있게 다음 js를 본인이 담당하는 사이트에 삽입 하도록 하자.

 - 혹시 해결이 안될때를 대비하여 다음 참고

github.com/github/fetch/issues/656

stackoverflow.com/questions/44242051/script5009-fetch-is-undefined

 

● 첫번째 방법 : fetch.js

 - fetch.js 직접 다운로드, 설치 등

 - github.com/github/fetch

<script type="module" src="경로/fetch.js"></scrip>

 

● 두번째 방법 : getch.umd.min.js

ex) cdn 이용

<script src=https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0/dist/fetch.umd.min.js></script>

ex) cdn 이용2

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.5.0/fetch.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.5.0/fetch.js"></script>

 - 또는 참고 : cdnjs.com/libraries/fetch

 

 - Promise 관련 오류와 상기 js를 삽입한 경우 나와같은 경우는 해당 오류가 해결 되었다.