CORS 오류

🧭 개발자 모드(F12)에 뜨는 CORS 오류, 도대체 왜?

개발을 하다 보면 갑자기 요청이 실패하면서 콘솔에 빨간 오류가 뜨는 경험, 한 번쯤은 하게 됩니다.

Access to fetch at 'http://localhost:8080/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy...

처음엔 서버가 죽었나? 싶지만, 서버는 잘 살아 있고 응답도 정상입니다.
그런데 브라우저는 응답을 받았음에도 그걸 거부해버립니다.
이 정체불명의 메시지의 주인공은 바로 CORS입니다.

---

🔍 CORS란 무엇인가?

CORS는 Cross-Origin Resource Sharing의 약자로,
다른 출처(origin)의 리소스를 허용해줄지 말지를 브라우저가 판단하는 정책입니다.

정확히 말하면, 브라우저는 보안상의 이유로 같은 출처(Same-Origin)가 아닌 곳으로부터 리소스를 요청하는 걸 기본적으로 막습니다.

---

🔑 "출처(origin)"란?

출처는 아래 세 가지의 조합으로 결정됩니다:

• 프로토콜: http / https
• 도메인 (호스트): localhost, example.com, 192.168.0.100 등
• 포트: 3000, 8080 등

---

예시로 이해해 보기

프론트 주소 백엔드 주소 출처 같음?

http://localhost:3000	http://localhost:3000	✅ 같음
http://localhost:3000	http://localhost:8080	❌ 다름 (포트 다름)
http://localhost:3000	https://localhost:3000	❌ 다름 (프로토콜 다름)
http://localhost:3000	http://192.168.0.101:3000	❌ 다름 (도메인 다름)

---

🚨 그래서 CORS 오류는 왜 뜨는가?

React나 Vue로 프론트엔드를 만들고, Spring이나 Node로 백엔드를 개발할 때 대부분 이렇게 나눠서 개발합니다:

• 프론트: http://localhost:3000
• 백엔드: http://localhost:8080

이때 프론트에서 API 요청을 보내면, 브라우저는 출처가 다르다고 판단하고 서버에게 이렇게 "물어봅니다":

"얘가 너한테 요청 보내도 되는 친구야? 허락해줘!"

이 과정을 CORS Preflight 요청이라고 합니다 (보통 OPTIONS 요청으로 먼저 보내 확인).

---

✅ 해결 방법: 백엔드에서 허락해 주자!

CORS는 결국 서버 쪽에서 ‘괜찮아, 요청 받아줄게’라고 응답 헤더를 설정해주는 것입니다.

Spring Boot 예시

@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class ApiController {
    @GetMapping("/api/data")
    public String data() {
        return "Hello, front!";
    }
}

혹은 전역 설정도 가능:

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true);
    }
}

---

💬 마무리하며

CORS는 브라우저가 보안을 위해 막는 것이지, 서버가 응답을 안 주는 건 아닙니다.
Postman에서는 잘 작동하지만, 브라우저에서만 막히는 이유가 바로 이 정책 때문입니다.

처음에는 "왜 응답이 오는데도 못 쓰지?" 싶은데, 이 개념을 알고 나면 모든 게 명확해집니다.
CORS 오류는 백엔드에서 허용해주면 해결되는 문제!