현대 웹 애플리케이션은 보안상의 이유로 동일 출처 정책(Same-Origin Policy)를 따르고 있습니다. 이 정책은 자바스크립트로 다른 도메인의 리소스에 접근하는 것을 제한합니다. 하지만 Cross-Origin Resource Sharing (CORS)를 활용하면, 동일 출처 정책을 우회하여 다른 도메인의 파일에 접근할 수 있습니다.

CORS란?

CORS는 웹 브라우저에서 실행되는 JavaScript가 다른 도메인의 리소스에 접근할 수 있도록 허용하는 메커니즘입니다. 일반적으로, JavaScript로 다른 도메인의 파일을 불러오려면 서버에서 CORS를 활성화해야 합니다. 이는 서버의 응답 헤더에 특정 정책을 설정하여 구현됩니다.

CORS 사용하기

1. 서버 설정 변경: 다른 도메인의 파일 검색을 허용하려면 서버에서 CORS 정책을 설정해야 합니다. 이를 위해 서버의 응답 헤더에 Access-Control-Allow-Origin 헤더 값을 설정해야 합니다. 아래는 Apache 웹 서버에서 CORS 정책을 설정하는 예시입니다.

Header set Access-Control-Allow-Origin "*"

1. JavaScript에서 요청 보내기: 서버에서 CORS를 설정한 후, 자바스크립트는 다른 도메인의 파일에 접근할 수 있도록 요청을 보내야 합니다. 일반적으로 fetch() 함수나 XMLHttpRequest 객체를 사용하여 요청을 보냅니다. 아래는 fetch() 함수를 사용하여 다른 도메인의 파일을 검색하는 예시입니다.

fetch('https://example.com/files', {
  method: 'GET',
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => {
    // 파일 검색 결과 처리
  })
  .catch(error => {
    // 에러 처리
  });

주의할 점은, 다른 도메인의 파일에 대한 요청을 보낼 때 mode 옵션을 ‘cors’로 설정해야 한다는 것입니다.

요약

CORS를 활용하면 자바스크립트에서 다른 도메인의 파일을 검색할 수 있습니다. 서버에서 CORS 정책을 설정하고, 자바스크립트에서 요청을 보낼 때 mode 옵션을 ‘cors’로 설정해야 합니다. 이를 통해 웹 애플리케이션에서 보안을 유지하면서 다양한 도메인의 리소스에 접근할 수 있습니다.

#SEO #CORS #자바스크립트 #파일검색