CORS를 허용하는 데 필요한 서버 측 구성을 해볼까요?

12 Oct 2023

cors

서버 측 설정

1. 응답 헤더에 Access-Control-Allow-Origin 추가

CORS를 허용하기 위해 응답 헤더에 Access-Control-Allow-Origin을 추가해야 합니다. 이 헤더는 클라이언트에게 서버가 특정 origin의 요청을 허용한다고 알려줍니다.

app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
  next();
});

위의 코드에서 https://example.com 부분에는 실제 클라이언트가 실행되는 도메인을 입력해야 합니다. 이렇게 하면 해당 도메인에서 오는 요청을 허용합니다. 모든 도메인의 요청을 허용하려면 *를 사용할 수 있습니다. 하지만 보안 상의 이유로 가능한한 정확한 도메인을 명시하는 것이 좋습니다.

2. 다른 CORS 관련 헤더 추가 (선택 사항)

아래는 일반적으로 사용되는 CORS 관련 헤더입니다. 필요에 따라 추가할 수 있습니다.

Access-Control-Allow-Methods: 허용되는 HTTP 메소드를 지정합니다. 예를 들어 GET, POST, PUT와 같이 사용할 수 있습니다.
Access-Control-Allow-Headers: 허용되는 요청 헤더를 지정합니다. 예를 들어 Content-Type, Authorization와 같이 사용할 수 있습니다.
Access-Control-Allow-Credentials: 인증 정보를 요청에 포함할 수 있는지를 나타냅니다. 필요하다면 true로 설정해야 합니다.
Access-Control-Max-Age: 프리플라이트 요청의 유효 기간을 지정합니다. 이 시간 동안은 실제 요청 전에 프리플라이트 요청을 다시 보내지 않아도 됩니다.

클라이언트 설정

XMLHttpRequest를 사용하는 경우

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.setRequestHeader('Origin', 'https://example.com');
xhr.send();

위의 코드에서 https://example.com 부분에는 클라이언트가 실행되는 도메인을 입력해야 합니다. 서버 측에서 Access-Control-Allow-Origin 헤더에 동일한 도메인이 허용되어 있는지 확인해야 합니다.

Fetch API를 사용하는 경우

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Origin': 'https://example.com'
  }
})
.then(response => {
  // 응답 처리
})
.catch(error => {
  // 오류 처리
});

마찬가지로 https://example.com 부분에는 클라이언트가 실행되는 도메인을 입력해야 합니다.

위의 설정을 따라 서버 측과 클라이언트 측을 구성하면 CORs 오류 없이 요청을 보낼 수 있습니다.

이제 서버에서 CORs를 허용하는 데 필요한 구성을 알아보았습니다. 이러한 설정을 통해 다른 도메인에서도 클라이언트와 서버 간에 안전하게 통신할 수 있습니다. #CORS #서버구성