CORS (Cross-Origin Resource Sharing)는 웹 브라우저에서 동일 출처 정책(Same Origin Policy)를 우회하여 다른 도메인의 리소스에 접근할 수 있도록 하는 메커니즘입니다. 이를 통해 자바스크립트에서 다른 도메인의 이미지를 가져와서 그릴 수 있습니다.

1. CORS 설정

서버 측에서는 CORS를 사용하도록 설정해야 합니다. 이를 위해서는 서버의 응답 헤더에 Access-Control-Allow-Origin을 추가해야 합니다. 이 헤더는 자바스크립트가 접근 가능한 도메인을 지정합니다.

다음은 Node.js와 Express를 사용하는 예제입니다.

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

app.use((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, () => {
    console.log('Server is running on port 3000');
});

위 설정은 모든 도메인의 요청을 허용하도록 하였습니다. 실제로는 보안을 위해 특정 도메인만 허용하도록 설정해야 합니다.

2. 이미지 가져오기

이제 자바스크립트에서 다른 도메인의 이미지를 가져와서 그릴 수 있습니다. new Image()를 통해 이미지 객체를 생성하고 src 속성에 이미지 URL을 설정합니다. 이미지 객체를 캔버스에 그리면 됩니다.

다음은 자바스크립트로 이미지를 가져와서 그리는 예제입니다.

// 캔버스 엘리먼트 생성
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 이미지 객체 생성
const img = new Image();

// 이미지 로드 완료 시 그리기
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};

// 이미지 URL 설정
img.src = 'https://example.com/image.jpg'; // 다른 도메인의 이미지 URL

// 캔버스를 문서에 추가
document.body.appendChild(canvas);

위 예제에서는 다른 도메인의 이미지를 가져와서 그리는 과정이 포함되어 있습니다. 이미지 로드가 완료되면 drawImage() 함수를 통해 캔버스에 이미지를 그립니다.

결론

CORS를 통해 자바스크립트에서 다른 도메인의 이미지를 그릴 수 있게 되었습니다. 서버 측에서는 CORS 설정을 해주어야 하며, 클라이언트 측에서는 이미지 객체를 생성하여 이미지를 가져와서 그릴 수 있습니다. 이를 통해 웹 애플리케이션에서 여러 도메인의 이미지를 활용할 수 있습니다.

#tech #CORS