[Laravel] : The GET method is not supported for this route. Supported methods: POST

이슈

이러한 이슈가 발생하는 이유는 현재 요청이 들어온 페이지에 맞는 HTTP Method 가 Router 에 등록되지 않았기 때문이다.

대부분 이런 이슈는 글 작성, 글 수정, 글 삭제 등에서 빈번히 발생한다.
빈번히 발생하는 이유는 많이 접하기 때문이다.

해결 방법

코드를 잘 확인해야 한다.

나는 POST 를 원해요

아래 코드는 GET 이다.
왜? Mehod를 POST 라고 알려주지 않았으니까

<form action="{{ route('boards.delete', ['id' => $board->id ]) }}">
    @csrf
    <button type="submit" class="btn btn-danger">삭제</button>
</form>

나 POST 맞아요.

아래 코드는 POST이다.
하지만 요청이 가는 곳은 현재 열려있는 페이지 이다.
왜? Action 이 어디인지 알려주지 않았으니까

<form method="POST">
    @csrf
    @method('DELETE')
    <button type="submit" class="btn btn-danger">삭제</button>
</form>

나 AJAX 썻는데요?

아래 코드는 GET의 현재 열려있는 페이지 이다.
왜? Method 와 Action이 어디인지 알려주지 않았으니까.

<form>
    @csrf
    <button type="submit" class="btn btn-danger">삭제</button>
</form>

위 코드는 ajax 을 이용할 때 많이 실수한다.
왜? button Type이 submit 이니까 ajax의 코드를 어떻게 작성했냐에 따라 자바스크립트에서 이벤트를 처리하던가 Form 에서 이벤트를 처리하기 때문이다.

또는 AJAX 에서 무언가를 빼먹었기 때문에 그렇다.
그렇기에 아래처럼 e.preventDefault() 를 입력하고, $('#upload_image_form').submit(function(e) 으로 처리를 해줘야한다.

또한 Laravel은 web.php 의 미들웨어에는 CSRF 를 검사하니 header를 추가 해줘야한다.

$(document).ready(function (e) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $('#image').change(function(){         
        let reader = new FileReader();
        reader.onload = (e) => { 
            $('#image_preview').attr('src', e.target.result); 
        }
        reader.readAsDataURL(this.files[0]); 
    });
    $('#upload_image_form').submit(function(e) {
        unUpload = true;
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type:'POST',
            url:'{{ route("product.image.upload") }}',
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            success: (data) => {
                this.reset();
                alert(data.image);
                document.getElementById('thumbnail').value = data.image;
                alert('썸네일 등록이 완료되었습니다.');
            },
            error: function(data){
                console.log(data);
            }
        });
    });
});