html 안에 같은 프로젝트 html 파일 로딩시킬 때 (로컬실행)

Question

html onload 시킬경우 아래 에러가 발생합니다.access to xmlhttprequest at 'file:///c:/users/administrator/desktop/load_test/components/header.html' from origin 'null' has been blocked by cors policy: cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.순수 html 안에서는 header, footer include 방식을 jquery append로 텍스트 넣는 방식말고 어떤게 있을까요?

비밀번호변경 · Answer

HTML에서는 기본적으로 다른 도메인에서 가져온 리소스에 접근할 수 없도록 보안상의 이유로 Same-Origin Policy를 적용하고 있습니다. 이러한 정책으로 인해 다른 도메인에서 가져온 리소스에 대한 접근이 차단되며, CORS(Cross-Origin Resource Sharing) 정책을 이용하여 이를 우회할 수 있습니다. 하지만 단순히 로컬 파일에서 HTML 파일을 실행할 때에는 CORS 정책을 우회하기 어렵기 때문에 해당 에러가 발생하는 것입니다.따라서 로컬 파일에서 헤더와 푸터를 include 하기 위해서는 JavaScript나 서버 측 언어를 사용하여 파일을 불러와야 합니다. JavaScript를 이용하여 파일을 불러오는 방법은 아래와 같습니다. Example

위 코드는 jQuery를 이용하여 header.html과 footer.html 파일을 각각 #header와 #footer라는 요소에 불러옵니다. 이를 사용하여 원하는 파일을 불러오고 적용할 수 있습니다

html 안에 같은 프로젝트 html 파일 로딩시킬 때 (로컬실행)

1개의 답변

Q&A 목록