Node.js에서 CORS 오류 해결 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *대상자**: Node.js/Express 환경에서 프론트엔드와 백엔드 간 통신을 처리하는 개발자
• *난이도**: 중급 (CORS 메커니즘 이해 및 서버 설정 필요)

핵심 요약

• Access-Control-Allow-Origin 헤더 설정: cors 패키지 사용 또는 수동 설정으로 해결
• OPTIONS 요청 처리: app.options()로 명시적으로 처리해야 함
• 중복 헤더 방지: 여러 중간 서버(예: Nginx)에서 CORS 헤더가 중복되지 않도록 설정
• 허용 메서드 및 헤더 명시: Access-Control-Allow-Methods와 Access-Control-Allow-Headers에 필요한 값을 포함

섹션별 세부 요약

1. **Vercel + Heroku 환경에서 CORS 헤더 누락**

• 프론트엔드(Vercel)와 백엔드(Heroku) 간 API 호출 실패
• 서버 응답에 Access-Control-Allow-Origin 헤더 누락
• 해결 방법: cors 패키지 사용 또는 수동으로 헤더 설정

```javascript

app.use(cors({ origin: "https://frontend.vercel.com" }));

```

2. **PUT 요청 시 OPTIONS 예비 요청 처리 누락**

• 파일 업로드 시 X-Token 헤더 포함으로 인한 예비 요청 발생
• 서버가 OPTIONS 메서드를 처리하지 않아 요청 차단
• 해결 방법: app.options()로 명시적으로 처리

```javascript

app.options("/upload", cors());

```

3. **Nginx + Node.js 중간 서버에서 중복 헤더 문제**

• Nginx와 Node.js CORS 미들웨어가 중복 헤더 추가
• 해결 방법: CORS 헤더가 단일 위치에서만 설정

```bash

curl -I https://api.example.com/upload

```

4. **withCredentials 사용 시 와일드카드 오리진 제한**

• withCredentials: true 사용 시 와일드카드(*) 오리진 불가능
• 해결 방법: 정확한 오리진 목록 지정 및 credentials: true 활성화

```javascript

cors({ origin: ["https://trusted-origin.com"], credentials: true });

```

5. **프론트엔드/백엔드 도메인 불일치**

• 프론트엔드(https://frontend.vercel.com)와 백엔드(https://api.heroku.com) 도메인 불일치
• 해결 방법: 프로토콜, 도메인, 포트 포함한 정확한 오리진 목록 추가

```javascript

const allowedOrigins = ["https://frontend.vercel.com:3000", "https://api.heroku.com:8000"];

```

6. **자체 서명 인증서로 인한 요청 거부**

• 서브도메인에서 사용하는 자체 서명 인증서로 인해 브라우저가 요청 거부
• 해결 방법: 신뢰할 수 있는 CA 인증서 사용 및 HTTPS 설정 검증

7. **PATCH/DELETE 메서드 허용 누락**

• PATCH/DELETE 요청이 브라우저에서 차단
• 해결 방법: Access-Control-Allow-Methods에 해당 메서드 명시

```javascript

cors({ methods: ["GET", "POST", "PATCH", "DELETE"] });

```

8. **커스텀 헤더 허용 누락**

• X-Token과 X-Client 같은 커스텀 헤더가 허용되지 않음
• 해결 방법: Access-Control-Allow-Headers에 허용 헤더 추가

```javascript

cors({ allowedHeaders: ["Content-Type", "X-Token", "X-Client"] });

```

결론

• 핵심 팁: cors 미들웨어 사용, OPTIONS 메서드 처리, 정확한 오리진/메서드/헤더 설정
• 추천: curl -I로 헤더 검증, allowedOrigins 목록 엄격히 관리, HTTPS 설정 검증
• 예시: app.use(cors({ origin: "https://trusted-origin.com", credentials: true }));