Cross-Origin Resource Sharing(CORS) 에러

🚧 CORS 란.

CORS (코어스) 는 Cross-Origin-Resource Sharing의 줄임말. “서로 다른 사이트끼리 데이터를 주고 받는 걸 제어하는 웹 보안 규칙”

쉽게 말해서, “다른 사이트에서는 함부로 내 데이터 보지마!” 라고 통제한다.

📣 예시

나는 지금 https://www.food-order.com 라는 사이트(프론트), 주문 정보를 https://api.food-system.com 라는 다른 주소(API 서버)에 요청.

이렇게 주소가 다르면 “다른 출처(Origin)”이라고 말한다.

그래서 서버는 반드시 브라우저에게 이렇게 허락을 해줘야 한다.

Access-Control-Allow-Origin: https://www.food-order.com

이걸 “CORS 응답 헤더” 라고 부른다.

⛔️ CORS 에러는 왜 생기는 걸까?

서버가 허락을 안해주면, 브라우저는 이렇게 차단한다.

❌ “이 서버는 너한테 응답 못해. 보안 때문에 막을거야”

✅ 해결방법

서버에게 정확한 도메인을 허용해주거나, 특정 IP로 허용해주는 설정을 해주면 된다.

## 여러개의 IP 등록 할때..

if ($remote_addr = "1.1.1.1") {
    set $cors_origin $http_origin;
}

if ($remote_addr = "2.2.2.2") {
    set $cors_origin $http_origin;
}

if ($http_origin = "허락할도메인") {
    set $cors_origin $http_origin;
}

location / {
            uwsgi_pass ;

            # 서버가 uwsgi를 쓴다면 필요할 수도..
            uwsgi_hide_header Access-Control-Allow-Origin; 
            uwsgi_hide_header Access-Control-Allow-Methods;
            uwsgi_hide_header Access-Control-Allow-Headers;
            uwsgi_hide_header Access-Control-Allow-Credentials;

            set $cors_origin "";

            if ($remote_addr = "허락할 특정IP") { # 필요없으면 이 블럭 빼면 됨.
                set $cors_origin $http_origin;
            }

            if ($http_origin = "허락할 domain") { # 필요없으면 이 블럭 빼면 됨.
                set $cors_origin $http_origin;
            }

            
            add_header 'Access-Control-Allow-Origin' "$cors_origin" always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;

            if ($request_method = OPTIONS ) {
                add_header 'Access-Control-Allow-Origin' "$cors_origin" always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
                add_header 'Access-Control-Max-Age' 3600;
                add_header 'Content-Length' 0;
                add_header 'Content-Type' text/plain;
                return 204;
            }
        }

        location /route {
            allow ip; # 특정 IP
            deny all; # deny 정책
        }

⛺️ 옵션 설명

🚀 Access-Control-Allow-Origin

어떤 웹사이트에서 API를 요청할 수 있는지 지정, 이게 없으면 브라우저 차단 당한다.

🚀 Access-Control-Allow-Methods

어떤 HTTP 요청 종류를 허용할지 지정

🚀 Access-Control-Allow-Headers

브라우저가 보낼 수 있는 요청 헤더를 허용한다. 예를 들어, 클라이언트가 JWT 토큰을 담기 위해 Auth 헤더를 쓸 때, 서버가 이걸 허용해주지 않으면 요청 자체가 막힌다.

Content-Type도 없으면 Application/json 같은 것도 막힌다.

🚀 Access-Control-Allow-Credentials

“쿠키, 인증정보도 같이 보내도 돼”를 허용

브라우저에서 withCredentials: true를 사용하는 요청이 있으면 이 설정이 필수다.

예: 로그인 상태 유지용 쿠키, 토큰 등을 브라우저가 같이 보내려면 이게 있어야 한다.

🚀 Access-Control-Max-Age

브라우저가 CORS 체크 결과를 얼마나 오래 기억할지 설정(초 단위)

브라우저는 1시간 동안은 또 다시 OPTIONS 요청을 보내지 않고, 캐시된 정보를 쓴다.

🔥 서버 부하를 줄이기 좋음

🚀 Content-Length 와 Content-Type

OPTIONS 요청의 응답 내용 설정

OPTIONS는 데이터를 주고받지 않기 때문에, 응답 길이는 0
그냥 텍스트로 응답하겠다는 의미
브라우저가 이 응답을 제대로 처리하기 위해 필요함

Cross-Origin Resource Sharing(CORS) 에러