Svelte에서 NetworkError when attempting to fetch resource. 오류

오늘 Svelte 튜토리얼을 보며 Await 응용을 해보고 있었다.

<script>
    async function getRandomNumber() {
        const res = await fetch(`/tutorial/random-number`);
        const text = await res.text();

        if (res.ok) {
            return text;
        } else {
            throw new Error(text);
        }
    }
    let promise = getRandomNumber();
</scipt>

{#await promise}
    <p>...waiting</p>
{:then number}
    <p>The number is {number}</p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

Svelte에서는 위와 같이 간단한 방식으로 비동기적으로 fetch할 수 있다. 그리고 이 상태에서 svelteKit으로 옮겨 수정하여 DRF로 만든 API를 받아오게 만들었다.

그런데 :catch error로 오류를 잡게 해 둔 부분에서 계속 NetworkError when attempting to fetch resource. 오류가 발생했다. 일단 console.log()로 찍어보니 나오는 걸 봐서 출력 부분에서의 문제 같은데 계속 검색하니 CORS 문제밖에 안 나왔다. 이걸 보고 그대로 수정했으면 됐는데, CORS는 당연히 아니라고 생각하여 괜히 시간낭비하게 되었다.

왜 CORS는 아니라고 생각했는가 하면...

1. DRF 제네릭을 사용하면 자동으로 CORS 정책은 알아서 되는줄 알았다.

2. console.log()로 찍어서 나오길래 Svelte문제인줄 알았다

3. CORS가 브라우저단에서 자체적으로 막는 것인 줄 몰랐다.

 

이것저것 해보다가 크롬에서 찍어보니 에러메시지가 다르게 나와서, 뭔가 쌔함을 느끼고 DRF에 CORS 미들웨어를 추가해주니 바로 정상적으로 돌아갔다...

이래서 어설프게 아는게 제일 위험하다