sitelink1 http://blog.naver.com/ljpark6/220808864807 
sitelink2  
sitelink3  
sitelink4  
extra_vars4  
extra_vars5  
extra_vars6  

한 자원이 자신이 호스팅되는 출처(Origin Server)와 다른 출처의 자원을 요청하게 될 때, Cross-origin HTTP 요청이 발생한다. 한 가지 예로, http://domain-a.com에 있는 HTML 문서에서 <img> src 속성을 통해 http://domain-b.com/image.jpg 이미지를 요청하는 경우를 들 수 있다. 오늘날 많은 웹 페이지들은 CSS 스타일쉬트, 이미지 파일, 스크립트와 같은 자원들을 별도의 출처로부터 읽어온다.

브라우저들은 보안 이슈 때문에 스크립트에서 발생시키는 Cross-origin HTTP 요청을 제한한다. 그 예로, XMLHttpRequest 는 동일 출처 정책(Same-origin Policy)을 준수하기 때문에,  XMLHttpRequest는 동일 출처에만 HTTP 요청을 보낼 수 있었다. 그래서, 웹 개발자들은 더 나은 웹 어플리케이션을 위해 브라우저 제조사들에게 XMLHttpRequest가 Cross-domain 요청을 할 수 있도록 요구했다.

W3C Web Applications Working Group 은 이에 새로운 Cross-Origin Resource Sharing (CORS) 모델을 제안한다. CORS를 사용하면, 안전한 Cross-domain 데이터 전송이 가능한 Cross-domain 접근 제어를 할 수 있다. 현대 브라우저는 CORS를 XMLHttpRequest 같은 API Container 형태로 사용하여 Cross-origin HTTP 요청의 위험을 줄이고 있다.
 

1: GET /resources/public-data/ HTTP/1.1
2: Host: bar.other
3: User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1. 9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
4: Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
5: Accept-Language: en-us,en;q=0.5
6: Accept-Encoding: gzip,deflate
7: Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
8: Connection: keep-alive
9: Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
10: Origin: http://foo.example


13: HTTP/1.1 200 OK
14: Date: Mon, 01 Dec 2008 00:23:53 GMT
15: Server: Apache/2.0.61 
16: Access-Control-Allow-Origin: *
17: Keep-Alive: timeout=2, max=100
18: Connection: Keep-Alive
19: Transfer-Encoding: chunked
20: Content-Type: application/xml
21: 
22: [XML Data]

 

라인 1 - 10은 Firefox 3.5에서 보낸 HTTP 요청 헤더이다. 라인 10의 Origin 헤더를 통해 도메인 "http://foo.example" 상의 웹문서로부터 이 HTTP 요청이 왔음을 알 수 있다.

라인 13 - 22는 도메인 "http://bar.other"에서 전달한 HTTP 응답을 보여준다.  HTTP 응답에서 서버는 Access-Control-Allow-Origin: 헤더를 전달하고 있다. Origin: 헤더와 Access-Control-Allow-Origin: 헤더의 사용은 가장 단순한  HTTP 접근제어 방식이다. 위 예제의 "Access-Control-Allow-Origin: *"는 해당 자원은 어떤 도메인에서도 Cross-site 방식으로 접근 가능함을 의미한다. 만약, "http://bar.other" 자원 소유주가 해당 자원을 "http://foo.example"에서 전달되는 Cross-site 접근만을 허용하려면 아래와 같이 응답하면 된다:

Access-Control-Allow-Origin: http://foo.example
 

 

번호 제목 글쓴이 날짜 조회 수
27 [JavaScript Tutorials] Handling runtime errors in JavaScript using try/catch/finally (해석중) 황제낙엽 2009.04.08 2784
26 연속해서 스트림 받기 (flush data from servlet to jsp with ajax) 황제낙엽 2013.01.04 2428
25 외부 라이브러리 (.js) 의 바람직하지 않은 동적 로딩 (eval함수 이용) 황제낙엽 2012.01.18 1851
24 CORS(Cross-Origin Resource Sharing) - 4 file 황제낙엽 2017.03.07 880
23 Javascript CORS/XSS 극복하는(피하는) 방법 file 황제낙엽 2017.07.31 648
22 Javascript 를 사용하여 Binary File 읽기 황제낙엽 2010.09.29 500
21 XMLHttpRequest 의 이벤트 onreadystatechange 황제낙엽 2012.05.30 412
20 진행 상황 추적하기(XMLHttpRequest.readyState) file 황제낙엽 2012.05.23 324
19 CORS(Cross-Origin Resource Sharing) - 5 file 황제낙엽 2017.03.07 261
18 XMLHttpRequest.timeout 황제낙엽 2018.11.03 248
17 두 서버의 자원을 접근하는 클라이언트 프레임웍(Next.js)에서의 CORS오류 file 황제낙엽 2021.12.05 231
16 CORS 의 내용과 이에 대한 우회 방안들 file 황제낙엽 2021.12.05 139
15 CORS(Cross-Origin Resource Sharing) - 1 file 황제낙엽 2017.03.07 135
14 HTTP 접근 제어 (CORS) 황제낙엽 2017.05.29 125
13 Ajax (XMLHttpRequest) 샘플 황제낙엽 2017.08.01 93
12 XMLHttpRequest.setRequestHeader 황제낙엽 2013.09.30 62
11 XMLHttpRequest 제대로 활용하기 file 황제낙엽 2017.08.01 58
10 CORS(Cross-Origin Resource Sharing) - 3 file 황제낙엽 2017.03.07 45
9 [펌] TAEYO.NET - JavaScript OOP 스트레칭 황제낙엽 2009.04.02 27
8 Fetch API (CORS 극복을 위한 노력) 황제낙엽 2021.12.05 26