CORS
CORS와 실행 3단계
해결하는 문제
잘 되던 HTML이 더블클릭으로 열면 외부 호출이나 모델 로딩에서 막힌다.
브라우저는 페이지가 어디서 왔는지(출처)에 따라 통신을 제한합니다. 더블클릭, Live Server, 로컬 서버 순으로 실행 방법을 올립니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것HTML 파일
브라우저가 하는 일열린 방식에 따라 출처가 정해지고 허용 범위가 달라짐
나오는 것정상 동작 또는 차단 오류
쓰는 브라우저 기술
Originfetchfile:// 와 http://localhost
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- ① 더블클릭 (file://)
- ② VS Code Live Server
- ③ python -m http.server
자주 막히는 곳
- 서버 쪽 허용이 없는 API는 브라우저에서 우회할 수 없다 (엣지 함수 필요)
- file://에서는 카메라·클립보드 권한도 제한될 수 있다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 콘솔 오류를 설명해 주는 진단 도우미
웹 서비스
- 강의 첫 시간 실행 환경 점검표
피지컬 AI
- 장비 웹 화면 접근 문제 진단
넓히는 방법
- 오류 메시지를 AI에 그대로 붙여 원인 찾기
- 배포 주소(HTTPS)로 올리기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
이 HTML을 더블클릭하면 콘솔에 CORS 오류가 난다. 원인을 설명하고 Live Server나 python -m http.server로 실행하는 방법을 알려줘.
같은 분류의 능력
12 보안·개인정보·권한에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md