웹 개발을 하다보면 다른 도메인 간에 웹소켓 연결을 필요로 할 때가 있습니다. 하지만 웹 브라우저는 보안 상의 이유로 도메인 간 요청을 제한하고 있습니다. 이러한 제한을 우회하기 위해 CORS(Cross-Origin Resource Sharing)를 활용할 수 있습니다. 이번 블로그에서는 CORS를 활용하여 자바스크립트에서 다른 도메인의 웹소켓 연결을 구현하는 방법에 대해 알아보겠습니다.

CORS란?

CORS는 서로 다른 도메인 간에 데이터를 주고받을 수 있도록 도와주는 웹 표준입니다. 보안 정책으로 인해 동일 출처 정책(Same-Origin Policy)에 의해 다른 도메인에서 도메인과 다른 도메인으로의 HTTP 요청이 제한되는 상황에서 CORS를 사용하여 이러한 제한을 우회할 수 있습니다.

웹소켓 연결 구현하기

자바스크립트에서 다른 도메인의 웹소켓 연결을 구현하려면 먼저 웹소켓 객체를 생성해야 합니다. 그리고 서버의 주소를 입력하여 연결을 시도합니다. 이때 CORS를 사용하기 위해 추가 설정이 필요합니다. 아래는 예시 코드입니다.

const socket = new WebSocket('wss://other-domain.com');

socket.onopen = function() {
  console.log('웹소켓 연결이 열렸습니다.');
};

socket.onmessage = function(event) {
  console.log('서버로부터 데이터를 수신했습니다:', event.data);
};

socket.onclose = function() {
  console.log('웹소켓 연결이 닫혔습니다.');
};

위의 예제에서는 new WebSocket('wss://other-domain.com')를 통해 다른 도메인의 웹소켓 연결을 시도하고 있습니다. 여기서 wss는 웹소켓을 사용하는 경우의 프로토콜을 나타내며, other-domain.com은 다른 도메인의 주소를 의미합니다.

서버 설정 변경하기

웹소켓 연결을 위해 CORS를 사용하기 위해서는 서버의 설정도 변경해야 합니다. 서버에서는 클라이언트의 도메인에 대한 접근을 허용하는 CORS 설정을해야 합니다. 이를 위해 서버에 CORS 관련 헤더를 추가해야 합니다.

아래는 Node.js에서 Express 프레임워크를 사용하여 CORS 설정을 추가하는 예시 코드입니다.

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

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

// 웹소켓 서버 설정 등을 추가로 작성합니다.

app.listen(3000, function() {
  console.log('서버가 3000번 포트에서 실행 중입니다.');
});

위의 예제에서는 res.header('Access-Control-Allow-Origin', '*')를 통해 모든 도메인에서의 접근을 허용하고 있습니다. 보안상의 이유로 모든 도메인에 대한 접근을 허용하는 것이 아니라면 ‘*’ 대신 특정 도메인을 입력해야 합니다.

결론

CORS를 활용하여 자바스크립트에서 다른 도메인의 웹소켓 연결을 구현하는 방법에 대해 알아보았습니다. 웹소켓을 활용하면 실시간으로 데이터를 주고받을 수 있으며, CORS 설정을 통해 다른 도메인 간의 연결도 가능해집니다. 보안에 주의하며 활용하도록 하세요.

#javascript #CORS #웹소켓