CORS 정책 차단 오류 해결 방법

🚨 CORS 정책 차단 오류 해결 방법

오류 메시지:
❌ "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

이 오류는 다른 도메인(origin)에서 API 요청을 보낼 때, 서버가 이를 허용하지 않아서 발생하는 문제입니다. 웹 브라우저는 보안상의 이유로 다른 출처(Origin)에서 온 요청을 차단합니다.

---

✅ 해결 방법

1️⃣ 서버에서 CORS 허용하기 (권장)

요청을 보내는 서버에서 CORS 헤더를 추가해야 합니다.

🔹 Node.js (Express 서버)

const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors()); // 모든 도메인에서 요청 허용

// 특정 도메인만 허용
app.use(cors({
  origin: 'https://your-allowed-domain.com'
}));

app.listen(3000, () => console.log('Server running on port 3000'));

🔹 Apache 서버

.htaccess 파일 수정:

Header set Access-Control-Allow-Origin "*"

(* 대신 특정 도메인만 허용 가능: "https://your-allowed-domain.com")

---

2️⃣ 프록시 서버 사용하기

백엔드 서버를 직접 수정할 수 없을 경우, 프록시 서버를 사용하면 해결할 수 있습니다.

🔹 프록시 설정 (React/Vue 등)

📌 package.json에 프록시 설정 추가:

"proxy": "https://your-api-server.com"

---

3️⃣ 브라우저에서 CORS 무시하기 (임시 해결)

개발 중이라면, CORS 정책을 무시하는 방법도 있습니다.
⚠️ 보안상 안전하지 않으므로, 배포 환경에서는 사용하면 안 됩니다!

🔹 크롬 브라우저에서 CORS 비활성화 실행 (Windows)

chrome.exe --disable-web-security --user-data-dir="C:\chrome-dev"

🔹 크롬 확장 프로그램 사용

• Moesif CORS Chrome Extension

---

🔚 결론

1. 서버에서 CORS 허용 설정 (가장 좋은 방법)
2. 프록시 서버 사용
3. 개발 중이라면 브라우저 설정 변경 (배포용 아님)