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 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 1
26 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 0
25 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 황제낙엽 2023.08.21 0
24 [URLSearchParams] URL 파라미터(매개변수) 값 가져오기 file 황제낙엽 2023.02.02 0
23 Fetch API (CORS 극복을 위한 노력) 황제낙엽 2021.12.05 26
22 두 서버의 자원을 접근하는 클라이언트 프레임웍(Next.js)에서의 CORS오류 file 황제낙엽 2021.12.05 231
21 CORS 의 내용과 이에 대한 우회 방안들 file 황제낙엽 2021.12.05 139
20 client 통신 기술 jquery ajax, fetch, axios 황제낙엽 2021.12.05 8
19 XMLHttpRequest Specification 황제낙엽 2021.04.29 11
18 XMLHttpRequest.timeout 황제낙엽 2018.11.03 248
17 XMLHttpRequest 제대로 활용하기 file 황제낙엽 2017.08.01 58
16 Ajax (XMLHttpRequest) 샘플 황제낙엽 2017.08.01 93
15 Javascript CORS/XSS 극복하는(피하는) 방법 file 황제낙엽 2017.07.31 648
14 HTTP 접근 제어 (CORS) 황제낙엽 2017.05.29 125
13 CORS(Cross-Origin Resource Sharing) - 5 file 황제낙엽 2017.03.07 261
12 CORS(Cross-Origin Resource Sharing) - 4 file 황제낙엽 2017.03.07 873
11 CORS(Cross-Origin Resource Sharing) - 3 file 황제낙엽 2017.03.07 45
» CORS(Cross-Origin Resource Sharing) - 2 황제낙엽 2017.03.07 24
9 CORS(Cross-Origin Resource Sharing) - 1 file 황제낙엽 2017.03.07 135
8 XMLHttpRequest.setRequestHeader 황제낙엽 2013.09.30 62