자바스크립트(JavaScript)

[JavaScript] CORS 오류 해결 방법 - Access-Control-Allow-Origin 문제 해결하기

JJONY 2025. 3. 29. 01:16
반응형

웹 개발을 하다 보면 자주 마주치는 오류 중 하나가 CORS(Cross-Origin Resource Sharing) 오류입니다. 특히 JavaScript로 다른 도메인에서 데이터를 요청할 때, 'Access-Control-Allow-Origin' 헤더와 관련된 오류가 발생합니다. 이 문제는 초보자들이 자주 겪는 문제이며, 잘못된 설정으로 인해 요청이 차단될 수 있습니다. 이번 포스팅에서는 CORS의 개념과 'Access-Control-Allow-Origin' 오류를 해결하는 방법을 자세히 설명하겠습니다.

CORS 오류 해결 방법

1. CORS란 무엇인가?

1) CORS의 정의

CORS는 서로 다른 출처(Origin) 간의 리소스 공유를 허용하거나 제한하는 메커니즘입니다. 보안상의 이유로, 브라우저는 동일 출처 정책(Same-Origin Policy)을 적용하여 다른 출처로부터의 요청을 제한합니다.

2) 동일 출처 정책 (Same-Origin Policy)

2. CORS 오류 발생 원인

1) Access-Control-Allow-Origin 오류

  • 클라이언트 측에서 서버에 요청을 보낼 때, 서버가 요청을 허용하지 않으면 오류가 발생합니다.
  • 오류 메시지 예시:
Access to XMLHttpRequest at 'https://api.example.com/data' from origin 'https://yourdomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2) OPTIONS Preflight 요청

  • 일부 요청(특히, POST, PUT, DELETE 등)은 사전 요청(Preflight Request)을 보내어 서버의 허용 여부를 확인합니다.
  • 서버가 Access-Control-Allow-Origin 헤더를 응답하지 않으면 오류가 발생합니다.

3. CORS 오류 해결 방법

1) 서버 측 설정 변경하기 (권장 방법)

서버가 요청을 허용하도록 설정하는 것이 가장 바람직한 방법입니다.

Node.js (Express 예제)

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

app.use(cors());

app.get('/api/data', (req, res) => {
    res.json({ message: 'CORS 허용됨' });
});

app.listen(3000, () => {
    console.log('서버가 실행 중입니다.');
});

2) 서버에서 Access-Control-Allow-Origin 헤더 설정하기

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

3) 클라이언트 측 해결 방법 (임시 방편)

브라우저의 보안 정책을 무시하는 방법이지만, 보안상 권장되지 않습니다.

예제: fetch() 함수 사용

fetch('https://api.example.com/data', {
    method: 'GET',
    mode: 'no-cors'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('CORS 오류 발생:', error));

4. 추가 팁 및 참고 사항

  • 서버 측에서 특정 출처만 허용하려면 '*' 대신 특정 URL을 명시해야 합니다.
  • 예: res.header('Access-Control-Allow-Origin', 'https://yourdomain.com');
  • mode: 'no-cors'는 일부 요청에 대해 제한이 있으며, 데이터 파싱이 불가능할 수 있습니다.
  • 개발 환경에서만 허용하고 배포 환경에서는 적절한 설정을 해야 합니다.

5. 요약 및 마무리

이번 포스팅에서는 JavaScript에서 발생하는 CORS 오류와 이를 해결하는 방법을 알아보았습니다. 특히 Access-Control-Allow-Origin 오류는 서버 측에서의 설정이 필요하며, 임시로 해결하기 위해 클라이언트 측에서 mode: 'no-cors' 옵션을 사용할 수 있습니다. 하지만 보안을 위해 올바른 설정 방식을 사용하는 것이 좋습니다. 문제가 발생하면 서버의 응답 헤더를 확인하고, 서버 설정을 변경하여 문제를 해결하세요.

6. 관련 글 링크

  • 관련 글: JavaScript의 fetch() 함수 사용법과 오류 해결 방법
  • 태그: #JavaScript #CORS #AccessControlAllowOrigin #오류해결 #코딩초보자
반응형
저작자표시 (새창열림)