[트러블 슈팅] 15. URL 주소가 현재 URL 뒤로 붙음 (상대 경로)

소스코드

 async function updateBoard() {
        // 1. id 값 찾아서 requestBody 오브젝트에 넣기
        let requestBody = {
            "author": document.querySelector("#author").value,
            "title": document.querySelector("#title").value,
            "content": document.querySelector("#content").value
        };
        // 2. fetch put 요청하기
        let response = await fetch("api/boards/" + boardId, {
            method: "put",
            body: JSON.stringify(requestBody),
            headers: {"Content-Type": "application/json"}
        });
        console.log(response)

        let reponseBody = await response.json();

        console.log(reponseBody)
        // // 3. 마지막에 아래 코드로 페이지 이동하기
        // location.href = "/";
    }

원인

❗

위에 소스 코드에 url을 지정하는 부분을 보면 맨 앞에 /가 빠져 있기 때문에 상대 경로이기 때문에 현재 주소부터 내가 작성한 주소를 찾아간다. 하지만 / 가 붙어있다면 절대 경로로 root 부터 내가 작성한 주소로 간다.

async function updateBoard() {
        // 1. id 값 찾아서 requestBody 오브젝트에 넣기
        let requestBody = {
            "author": document.querySelector("#author").value,
            "title": document.querySelector("#title").value,
            "content": document.querySelector("#content").value
        };
        // 2. fetch put 요청하기
        let response = await fetch("/api/boards/" + boardId, {
            method: "put",
            body: JSON.stringify(requestBody),
            headers: {"Content-Type": "application/json"}
        });
        console.log(response)

        let reponseBody = await response.json();

        console.log(reponseBody)
        // // 3. 마지막에 아래 코드로 페이지 이동하기
        // location.href = "/";
    }