이번 블로그 포스트에서는 자바스크립트에서 CORS(Cross-Origin Resource Sharing)를 사용하여 다른 도메인에 있는 머신러닝 모델을 활용하는 방법에 대해 알아보겠습니다.

머신러닝 모델은 대부분 서버 측에서 실행되는 경우가 많습니다. 하지만 때로는 클라이언트 측에서 직접 모델을 활용해야 하는 경우도 있습니다. 이때 CORS는 도메인 간 통신을 가능하게 하는 중요한 메커니즘입니다.

CORS란?

CORS는 웹 브라우저의 도메인 간 통신을 제어하는 메커니즘입니다. 웹 애플리케이션은 보안 상의 이유로 기본적으로 도메인 간 통신을 제한하고 있습니다. 다른 도메인에서 자원을 요청하기 위해서는 해당 도메인에서 CORS 정책을 설정해야 합니다.

CORS 설정

먼저, 머신러닝 모델이 위치한 서버에서 CORS 정책을 설정해야 합니다. 이를 위해 서버에서는 응답 헤더에 Access-Control-Allow-Origin 헤더를 추가하여 클라이언트 도메인을 허용해야 합니다. 예를 들어, 다음과 같은 서버 사이드 코드를 사용할 수 있습니다.

// Node.js 예시
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://example.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// ... 다른 라우터 및 미들웨어 설정

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

위 코드에서 Access-Control-Allow-Origin 헤더를 적절한 도메인으로 설정하고, 필요한 경우 Access-Control-Allow-Methods와 Access-Control-Allow-Headers도 함께 설정해야 합니다.

자바스크립트에서 모델 활용하기

CORS 정책이 설정된 서버에 요청을 보내고, 머신러닝 모델을 활용하는 방법은 간단합니다. 아래 예제 코드를 참고해보세요.

fetch('http://example.com/model', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    input: [1, 2, 3],
  }),
})
  .then(response => response.json())
  .then(result => {
    // 모델의 결과를 활용하는 코드 작성
    console.log(result);
  })
  .catch(error => {
    // 에러 처리 코드 작성
    console.error(error);
  });

위 코드에서 fetch 함수를 사용하여 서버에 POST 요청을 보냅니다. 요청 헤더에는 ‘Content-Type’을 application/json으로 설정하고, body에는 JSON 형식으로 데이터를 전달합니다. 응답을 받은 후에는 결과를 활용하거나 에러를 처리할 수 있습니다.

요약

이번 블로그 포스트에서는 자바스크립트에서 CORS를 사용하여 다른 도메인에 있는 머신러닝 모델을 활용하는 방법을 알아보았습니다. CORS 정책을 서버에 설정하고, 클라이언트에서 fetch 함수를 사용하여 요청을 보내고 결과를 처리하는 방법에 대해 살펴보았습니다. 자바스크립트와 CORS를 통해 머신러닝 모델을 클라이언트에서도 활용할 수 있게 되었습니다.

#javascript #CORS