[JavaScript] 20. 실행 환경 구축

[JavaScript] 20. 실행 환경 구축

 

1. Live Server 플러그인

-Live Server 플러그인은 VS Code에서 사용할 수 있는 확장 플러그인 중 하나로, 로컬 개발 환경에서 HTML,CSS, JavaScript로 구성된 웹페이지를 실시간으로 미리보기 할 수 있게 해준다. 이 플러그인은 코드가 변경될 때마다 자동으로 브라우저를 새로고침하여, 개발 중인 웹 페이지의 최신 상태를 바로바로 확인할 수 있게 해준다.

 

 

2. CORS 문제의 개념

• CORS(Cross-Origin Resource Sharing) 문제는 웹 개발에서 흔히 겪는 보안 이슈 중 하나!
• 이는 웹 페이지가 자신의 도메인이 아닌 다른 도메인의 리소스를 요청할 떄 흔히 발생하는 문제로, 웹브라우저의 보안 정책 때문에 발생하게 된다.
• CORS는 이런 상황에서 어떤 요청이 허용되고, 어떤 요청이 차단되어야 하는지를 결정하는 메커니즘을 제공한다.

*(1) 동일 출처 정책(Same-Origin-Policy): 이 정책은 웹 페이지가 자신이 로드된 도메인 외의 다른 도메인에서 리소스를 가져오는 것을 의미한다.

*(2) 교차 출처 요청(Cross-Origin Request): 만약 웹 페이지가 다른 도메인에서 API 호출이나 리소스 요청을 하려고 할 때, 브라우저는 이런 요청을 차단할 수 있다. 이를 교차 출처 요청이라고 한다.

 

 

3. CORS 문제 해결

1. Access-Control-Allow-Origin 헤더: 서버가 어떤 출처의 요청을 허용할지 헤더에 지정한다.
2. PreFlight 요청: 실제 요청을 보내기 전, 서버에 "PreFlight"요청을  보내 CORS 규칙을 확인한다.