POST 403 (Forbidden)

👉POST 403 (Forbidden)

403 Forbidden 오류는 요청이 서버에 의해 거부되었음을 나타냅니다. 이것은 주로 권한이 없는 경우 발생합니다.

이러한 경우가 발생하는 이유는 여러 가지가 있을 수 있지만, 주로 다음과 같은 이유가 있습니다:

1. CSRF(Cross-Site Request Forgery) 토큰이 누락되었거나 잘못된 경우: 서버에서 CSRF 보호를 위해 요청 헤더에 CSRF 토큰을 포함해야 하는 경우가 있습니다. AJAX 요청을 보낼 때 이 토큰을 함께 보내는 것을 확인하세요.
2. 사용자의 권한이 없는 경우: 서버가 요청을 처리할 권한이 없는 경우 발생할 수 있습니다. 로그인이 필요한 서비스인 경우, 사용자가 올바르게 인증되었는지 확인하세요.
3. 서버에서 요청을 거부하는 규칙 또는 정책이 있는 경우: 서버 측에서 요청을 거부하는 규칙 또는 정책이 있는 경우 403 Forbidden 오류가 발생할 수 있습니다. 이 경우 서버 로그 또는 API 문서를 확인하여 더 자세한 정보를 얻을 수 있습니다.

403 Forbidden 오류가 발생한 경우, 먼저 서버 측의 설정을 확인하고 문제를 해결해야 합니다. 요청이 올바르게 구성되었는지, 필요한 인증이 제공되었는지, 서버 측의 보안 정책을 준수하는지 등을 확인해야 합니다.

 

---

✅해결 방법

<aside> 💡 API 구현 할 때마다 Spring Security를 제대로 하지 않고 CRUD 기능을 구현하다 보니 계속 CSRF 오류가 발생하였다.

처음에는 csrf 문제 인건 알겠는데 어떻게 해결해야 할지 몰라서 프로젝트 진행 속도에 영향을 끼쳤다.

몇 번 똑같은 오류를 계속 경험하다 보니 정확한 원리는 아직 잘 모르지만 어떻게 해야 해결 할 수 있을지는 알게 되었다.

</aside>

우선 나는 html → js (ajax 통신 _ jquery를 사용) → controller 흐름으로 개발을 진행하였다.

1. 우선 JS 파일에 CSRF 토큰을 가져온다.

(이건 개발자마다 다르지만 나는 어차피 html 에서 js 그리고 css 연결을 지어 놓은 상태이기 때문에 js에서 부르기로 결정했다. * html에서도 부를 수 있다.)

// CSRF 토큰 가져오기
function getCsrfToken() {    return ***document***.querySelector('meta[name="_csrf"]').getAttribute('content');}

2. CSRF 토큰을 가져온다.

var csrfToken = getCsrfToken(); // CSRF 토큰 가져오기

그리고 가져온 토큰을 …

3.csrf 토큰을 헤더 설정 - 보내기

beforeSend: function(xhr) { // CSRF 토큰을 헤더에 설정 xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken); },

를 추가한다. 이는 ajax 를 통하여 서버로 데이터를 전송하는데 그때 csrf 토큰을 헤더에 넣어서 같이 보내버린다.

그렇게 하면 csrf 관련 403 오류를 해결 할 수 있다.

 $.ajax({
        beforeSend: function(xhr) {
            // CSRF 토큰을 헤더에 설정
            xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
        });
       

---

✅ 전체 코드.js

// CSRF 토큰 가져오기
function getCsrfToken() {
    return document.querySelector('meta[name="_csrf"]').getAttribute('content');
}

function deletePost(postId) {
    var csrfToken = getCsrfToken(); // CSRF 토큰 가져오기

$.ajax({
        type: 'DELETE',
        url: '/posts/' + postId, // 서버의 엔드포인트 경로
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
        },
        success: function(response) {
            alert("게시물이 삭제되었습니다.");
            // 요청이 성공하면 목록 페이지로 이동합니다.
            window.location.href = "/list-posts";
        },
        error: function(error) {
            console.error('Error deleting post:', error);
            alert("게시물 삭제 중 오류가 발생했습니다.");
            // 필요한 경우 오류 처리 동작 수행
        }
    });