js fetch 후, response 응답이 느린 문제

문제

let url = `${TSP_SVR_URL}/fix_points`;
    fetch(url, {
        method: "POST",
        headers: {
            "Content-type": "applicaion/json",
        },
        body: JSON.stringify({
            SPoint: pointList[0],
            EPoint: pointList[0],
            SPointList:{
                nodes:pointList.slice(1, cnt)
            },
        }),
    })
    .then(response => response.json())
    .then(body => {
        console.log(body)
    });

fetch 요청 시에 response의 body가 너무 늦게 오는 현상이었다. 

프리플라이트가 제일 먼저 오고, 그다음 fetch response가 들어오는데 시간이 무려 5.14초이다. 

단순 string만 받는데도 말이다. 

 

preflight가 뭔지해서 찾아보다가 아래 블로그를 보게 되었는데 "간단한 요청"을 보내기 위한 조건들이 설명되어있다. 

CORS 의미 / 현업에서 직접 겪은 CORS 이슈와 해결방법 정리 (tistory.com)

CORS 의미 / 현업에서 직접 겪은 CORS 이슈와 해결방법 정리

그래서 fetch시에 content-type을 text/plain으로 변경한 후에는 응답속도가 정상으로 돌아오고 preflight 요청은 더이상 나가지 않는 것을 확인할 수 있었다.

let url = `${TSP_SVR_URL}/fix_points`;
    fetch(url, {
        method: "POST",
        headers: {
            "Content-type": "text/plain"
        },
        body: JSON.stringify({
            SPoint: pointList[0],
            EPoint: pointList[0],
            SPointList:{
                nodes:pointList.slice(1, cnt)
            },
        }),
    })
    .then(response => response.json())
    .then(body => {
        console.log(body)
    });