이슈

fetch API를 이용해 프론트에서 서버로 요청을 보내고 서버에서 리다이렉팅 하도록 구현하였다.
하지만 브라우저로 리다이렉팅한 path의 response는 넘어오지만(200) 리다이렉팅한 페이지로 화면이 넘어가지 않았다.

const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // no-referrer, *client
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return await response.json(); // parses JSON response into native JavaScript objects

헤더 설정 중 redirect 프로퍼티가 있는데

• manual : 리다이렉트를 허용하지 않는다.
• error : 리다이렉트 응답을 에러로 처리한다.
• follow : 리다이렉트 응답을 허용한다. (HTTP status code = 301,302,303,307,308)

이중 follow 속성을 사용했음에도 리다이렉트 화면으로 넘어가지 않았다.

해결

fetch는 바로 redirect된 페이지로 이동이 안된다고 한다.(이유는 아직 모르겠다)
그래서 redirect response가 왔을 때 다시 한번 해당 url로 요청을 보내야한다.

response속성 중 redirected라는 프로퍼티로 redirect 여부를 검사한다.
response.redirected가 true일 경우,
window.location.href \= response.url
response.redirect(response.url)
둘 중 하나의 방법으로 다시 요청을 한다.

결론

fetch API에 생각보다 많은 제약이 있는 것 같다. HTTP Method 중에도 지원하지 않는 것들도 있고,,,(예를 들어 UPDATE같은,,)
다음 프로젝트에선 axios를 공부해서 적용해봐야겠다