[javascript] 비동기 데이터 요청에서의 크로스 도메인 이슈 해결 방법(CORS)

11 Dec 2023

javascript

웹 개발 시, 다른 도메인으로부터의 데이터 요청을 보낼 때 Cross-Origin Resource Sharing (CORS) 문제가 발생할 수 있습니다. 이는 브라우저의 보안 정책으로, 동일 도메인이 아닌 곳으로의 HTTP 요청이 차단됩니다. 이 문제는 특히 비동기적인 데이터 요청에서 주로 발생하며, 이를 해결하기 위한 몇 가지 방법이 있습니다.

1. 서버 측 설정

첫 번째로, 서버에서 CORS를 활성화하는 것이 있습니다. 이를 통해 서버는 클라이언트의 CORS 요청을 수락할 수 있게 됩니다.

예를 들어, Node.js의 Express.js 서버에서 CORS를 활성화하려면 cors 패키지를 설치한 후 다음과 같이 설정할 수 있습니다:

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

app.use(cors());

2. JSONP(JSON with Padding)

두 번째 방법은 JSONP를 사용하는 것입니다. JSONP는 <script> 태그를 활용하여 서로 다른 도메인 간에 데이터를 공유할 수 있게 해줍니다.

<script>
function handleData(data){
  // 데이터 처리
}
</script>
<script src="https://외부도메인.com/data.json?callback=handleData"></script>

3. 프록시 서버 사용

마지막으로, 클라이언트 측에서 데이터를 클라이언트와 같은 도메인에 요청하고, 서버 측에서 해당 요청을 받아 외부 도메인으로 전달하는 프록시 서버를 사용하는 방법이 있습니다.

fetch('/external-api')
  .then(response => response.json())
  .then(data => console.log(data));

CORS 문제는 웹 개발에서 자주 발생하지만, 위와 같은 방법들을 통해 효과적으로 해결할 수 있습니다.

참고 문헌:

MDN Web Docs

```plaintext