ReactJS Redux 문제 해결

React Redux: Fetch PUT 메소드가 OPTIONS 메소드만 반환하는 문제 해결하기

만약 상태 코드가 200인데도 Fetch PUT 메소드가 OPTIONS 메소드만 반환되는 문제가 발생한다면, 이곳에 올바른 곳에 찾아왔습니다. 이 블로그 포스트에서 우리는 이 문제에 대해 알아보고 해결책을 제공할 것입니다.

문제점

React Redux에서 Fetch API를 사용하여 PUT 요청을 보낼 때, 예상한 PUT 메소드 대신 브라우저가 OPTIONS 메소드를 보내는 것을 알 수 있습니다. 추가로, API 엔드포인트가 아직 준비되지 않은 경우 에러가 발생할 수도 있습니다.

해결책

이 문제를 해결하기 위해 코드를 수정해야 합니다:

1. credentials: 'same-origin' 옵션 추가

기본적으로 Fetch API는 cross-origin 요청에 쿠키나 사용자 정의 헤더를 포함시키지 않습니다. 쿠키와 같은 자격 증명을 포함하기 위해 fetch 요청에 credentials: 'same-origin' 옵션을 추가해야 합니다.

return fetch('/trendings', {
    method: 'PUT',
    headers: {
        'Accept': 'application/json',
        'Authorization': Config.token
    },
    credentials: 'same-origin',
    body: JSON.stringify(data),
})

2. 'Content-Type': 'application/json' 헤더 제거

일부 경우에는 isomorphic-fetch가 Content-Type: application/json 헤더를 올바르게 처리하지 못하는 문제가 있습니다. 이 문제를 피하기 위해 요청에서 'Content-Type' 헤더를 제거해야 합니다.

return fetch('/trendings', {
    method: 'PUT',
    headers: {
        'Accept': 'application/json',
        'Authorization': Config.token
    },
    credentials: 'same-origin',
    body: JSON.stringify(data),
})

요약

credentials: 'same-origin' 옵션을 추가하고 'Content-Type' 헤더를 제거함으로써, Fetch PUT 메소드가 예상한 PUT 메소드 대신 OPTIONS 메소드만 반환되는 문제를 해결할 수 있습니다. 이 해결책은 요청에 필요한 자격 증명을 포함하고 Content-Type을 올바르게 처리합니다.

이 변경 사항을 구현하면 OPTIONS 메소드를 받는 문제를 해결하고 PUT 요청을 성공적으로 진행할 수 있습니다.

이 문제 해결 가이드가 문제를 해결하는 데 도움이 되었기를 바랍니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs