window.onload는 모든 DOM 요소가 로딩된 후 실행

$(document).ready()는 dom이 준뵈 되거나 준비 상태일 때 실행

$(window).load()는 모든 이미지, 텍스트, css, stylesheets와 JS File이 로딩된 후 실행.

$(document).ready 보다 이후 실행.

참고 사이트 : https://www.techiediaries.com/javascript/document-ready-vs-window-onload-vs-window-load/

* 추가로 JQuery에서 $(function(){ code...});와 같이 사용되는 구문은 $(document).ready(fucntion() {code...}) 코드와 동일하다.

Client 란?

- 사용자가 사용하는 브라우저

- 항상 Request를 보내는 객체

- Web Server에 request를 전송하여 받은 응답값을 웹 페이지에 표시

Web Server 란?

- Client의 요청에 대한 문서를 제공하는 서버

Request Headers 란?

- 웹 브라우저에서 웹 서버에 전달해주는 데이터

- Request Header로 전달 받은 값으로 웹 서버에 적용

Response Headers 란?

- 웹 서버에서 웹 브라우저로 전달해주는 데이터

정리 된 사이트 : https://developer.mozilla.org/ko/docs/Web/HTTP/Overview

자바스크립트 코딩을 하다 알게된 오류에 대해 서술.

1. A 사이트에서 B 사이트 팝업창을 띄움

2. B 사이트 팝업창 버튼을 클릭시 A사이트의 브라우저 탭에 다른 A사이트 페이지를 띄움.

B 사이트 소스에 자바 스크립트 opener.window.open을 이용하여 2번 기능을 구현할려고 하였다.

하지만 CORS 문제로 인해 opener 접근 자체가 되지 않는다.

Request headers의 Origin과  요청한 웹 서버의 Access-Control-Allow-Origin에 허용 되지 않아 발생!

POST같은 요청을 보낼 때, 요청이 어느 주소에서 시작되었는지를 나타냅니다. 여기서 요청을 보낸 주소와 받는 주소가 다르면 CORS 문제가 발생하기도 합니다.

Cross-origin resource sharing

Cross-origin resource sharing(CORS)는 어느 한 웹 페이지에서 다른 웹 도메인의 웹 사이트 페이지에 자원 접근 요청을 막는다.

특히 Ajax 요청은 same-origin security policy 정책에 의해 기본적으로 접근이 불가능하다.

CORS는 아래의 로직으로 실행된다.

*출처 : Wikipiedia 문서 - https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

CORS와 관련된 Headers

Request headers

- Origin

- Access-Control-Request-Method

- Access-Control-Request-Headers

Response headers

- Access-Control-Allow-Origin

- Access-Control-Allow-Credentials

- Access-Control-Expose-Headers

- Access-Control-Max-Age

- Access-Contorl-Allow-Method

- Access-Control-Allow-Headers

CORS의 해결법

접근할 다른 도메인의 웹 서버의 헤더에 아래 값을 추가하면 된다.

Access-Control-Allow-Origin : 접근을 허용할 웹사이트 도메인

Ex) 네이버에서의 접근을 허용할려면 Access-Control-Allow-Origin : http://www.naver.com

참고 사이트 : https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS