[React] CORS 에러 (OPTIONS 요청 발생)

백엔드는 3001포트 프론트는3000 포트로 돌려서 axios 가져오려 할 때마다 cors가 말썽이다.

 

댓글을 삭제하기 위한 다음과 같이 백엔드 api

// 댓글 삭제
router.route('/reply/delete_reply').get((req, res) => {
    const idx = req.query.idx;
 
    if (pool) {
        replyDelete(idx, (err, result) => {
            if (err) {
                res.writeHead('201', { 'content-type': 'text/html; charset=utf8' });
                res.write('<h2>메인데이터 출력 실패 </h2>');
                res.write('<p>데이터가 안나옵니다.</p>')
                res.end();
            } else {
                res.send(result);
            }
        });
    }
})
 
// 댓글 삭제
const replyDelete = function (idx, callback) {
    pool.getConnection((err, conn) => {
        if (err) {
            console.log(err);
        } else {
            conn.query('delete from reply_like where replyIdx = ?', [idx]);
 
            conn.query('select EXISTS (select idx from reply where parentIdx = ? limit 1) as success;', [idx], (err, result) => {
                if (err) {
                    console.log(err);
                }
 
                if (result[0].success == 1) {
                    conn.query('update reply set memberIdx = ?, content = ? where idx = ?', [null, '삭제된 댓글입니다.', idx]);
                } else if (result[0].success == 0) {
                    conn.query('delete from reply where idx = ?', [idx]);
                }
 
                conn.release();
                if (err) {
                    callback(err, null);
                    console.log('select문 오류')
                    return;
                } else {
                    callback(null, true);
                }
            })
        }
    })
}

 

아래 프론트에서 delete axios요청

    // 댓글 삭제 실행
    const delReply = (replyIdx)=>{
        axios.get('http://localhost:3001/reply/delete_reply?idx='+replyIdx)
        .then(function (response) {
            console.log(response);
            alert('삭제되었습니다.');
            window.location.href="/detail/"+idx+"?idx="+param;
        })
        .catch(function (error) {
            alert('삭제 실패했습니다.');
            console.log(error);
        })
        .then(function () {
        });
    }

 

실행결과 다음과 같은 cors 에러가 발생했다....

DELETE가 blocked 되었다.

 

또한 터미널에도 DELETE가 아닌 OPTIONS로 요청되었다고 찍힌다.

 

 

찾아보니까 다음과 같다.

https://nukeguys.github.io/dev/options-request/

[TIL] `OPTIONS` 요청은 왜 발생하는가?

 

CORS(Cross-Origin Resource Sharing)란 웹페이지의 서버가 다른 서버의 리소스를 요청하는 것을 의미한다.

이는 유용하면서도 보안상의 문제점을 갖고 있다. 웹사이트에서 악의적인 목적으로 외부로 정보를 보내거나 하는 등의 요청을 보낼 수 있기 때문이다. 따라서 브라우저는 OPTIONS를 preflight하여 서버에서 허용하는 옵션을 미리 확인하고, 허용되지 않은 요청의 경우 405(Method Not Allowed)에러를 발생시키고 실제 요청은 전송하지 않는다.

 

아래 조건들 중 하나라도 만족하지 않으면 preflight 요청을 보내게 된다고 한다. 모두 만족하면 OPTIONS 없이 요청을 보낸다.

1. get, head, post 요청 중 하나
2. user agent에 의해 자동으로 설정되는(Connection, User-Agent, Fetch 스펙상 forbidden header로 정의되어 있는) 헤더외에 CORS-safelisted request-header로 명시된 헤더들만 포함된 경우(Accept, Accept-Language, Content-Language, Content-Type 등)
3. Content-Type은 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용

 

 

문서를 읽어보니 결과적으로 내가 요청한 delete 때문이었다.

따라서 http 메서드을 get 으로 변경했다.

// 댓글 삭제
router.route('/reply/delete_reply').get((req, res) => {
    const idx = req.query.idx;
 
    if (pool) {
        replyDelete(idx, (err, result) => {
            if (err) {
                res.writeHead('201', { 'content-type': 'text/html; charset=utf8' });
                res.write('<h2>메인데이터 출력 실패 </h2>');
                res.write('<p>데이터가 안나옵니다.</p>')
                res.end();
            } else {
                res.send(result);
            }
        });
    }
})

    // 댓글 삭제 실행
    const delReply = (replyIdx)=>{
        axios.get('http://localhost:3001/reply/delete_reply?idx='+replyIdx)
        .then(function (response) {
            console.log(response);
            alert('삭제되었습니다.');
            window.location.href="/detail/"+idx+"?idx="+param;
        })
        .catch(function (error) {
            alert('삭제 실패했습니다.');
            console.log(error);
        })
        .then(function () {
        });
    }

아주 잘된다.