현대 웹 애플리케이션은 다른 도메인 간 데이터 교환이 필요한 경우가 많이 발생합니다. 이러한 요구 사항을 충족하기 위해 Cross-Origin Resource Sharing (CORS)라는 메커니즘이 등장했습니다. CORS를 사용하면 다른 도메인으로부터 리소스를 요청하고 서버에서 데이터를 전송할 수 있습니다.

CORS란 무엇인가요?

CORS는 브라우저의 보안 정책으로 인해 다른 도메인 간 리소스 공유를 제한하는 것을 허용합니다. 일반적으로 브라우저는 같은 출처(Origin)에 있는 리소스만 요청하고 응답합니다. 출처는 프로토콜, 호스트 및 포트로 구성되며 다른 출처는 다른 도메인, 서브도메인, 포트입니다.

CORS를 사용한 폼 데이터 전송하는 방법

1. 클라이언트 측에서 폼 데이터를 수집합니다.

   const form = document.getElementById('myForm');
   const formData = new FormData(form);
   

2. XMLHttpRequest 객체를 사용하여 서버로 데이터를 전송합니다. ```javascript const xhr = new XMLHttpRequest();

xhr.open(‘POST’, ‘http://example.com/api/endpoint’, true); xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’); xhr.withCredentials = true; // 다른 도메인의 쿠키를 전송하려면 이 옵션을 활성화해야 합니다.

xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { console.log(‘전송 성공’); } else { console.error(‘전송 실패’); } } };

xhr.send(formData);

3. 서버에서는 CORS 관련 헤더를 설정하여 클라이언트 요청을 수락합니다. 예를 들어, 서버의 응답 헤더에 다음과 같은 헤더를 포함시킬 수 있습니다.
```javascript
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type

요약

CORS를 사용하여 자바스크립트에서 다른 도메인의 폼 데이터를 전송할 수 있습니다. 클라이언트 측에서 XMLHttpRequest 객체를 사용하여 데이터를 전송하고, 서버 측에서는 응답 헤더에 CORS 관련 헤더를 설정하여 클라이언트 요청을 수락합니다. 이를 통해 웹 애플리케이션에서 다른 도메인 간 데이터 교환을 간편하게 할 수 있습니다.

#webdevelopment #CORS