도메인 간 리소스 공유 CORS 상세 설명_javascript 기술

브라우저가 교차 출처 서버에 XMLHttpRequest 요청을 할 수 있도록 함으로써 AJAX가 동일한 출처에서만 사용될 수 있다는 한계를 극복합니다.

이 글에서는 CORS의 내부 메커니즘을 자세히 소개합니다.

(사진 설명: 아랍에미리트 알 아인 오아시스 파크에서 촬영)

1. 소개

CORS에는 브라우저와 서버 지원이 모두 필요합니다. 현재 모든 브라우저에서 이 기능을 지원하며, IE 브라우저는 IE10 이하일 수 없습니다.

전체 CORS 통신 프로세스는 브라우저에 의해 자동으로 완료되며 사용자 참여가 필요하지 않습니다. 개발자의 경우 동일한 소스의 CORS 통신과 AJAX 통신 간에 차이가 없으며 코드도 완전히 동일합니다. 브라우저가 AJAX 요청이 교차 출처임을 발견하면 자동으로 추가 헤더 정보를 추가하고 때로는 추가 요청이 이루어지지만 사용자는 이를 느끼지 못할 것입니다.

따라서 CORS 통신을 이루기 위한 핵심은 서버입니다. 서버가 CORS 인터페이스를 구현하면 Cross-Origin 통신이 가능합니다.

2. 두 가지 요청

브라우저에서는 CORS 요청을 간단한 요청과 단순하지 않은 요청이라는 두 가지 범주로 나눕니다.

다음 두 가지 조건이 동시에 충족된다면 간단한 요청입니다.

(1) 요청 방법은 다음 세 가지 방법 중 하나입니다.

헤드겟포스트

(2) HTTP 헤더 정보는 다음 필드를 초과하지 않습니다.

AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type: 세 가지 값으로 제한됨 ​​application/x-www-form-urlencoded, multipart/form-data, text/plain

위의 두 가지 조건을 동시에 충족하지 못하는 요청은 단순 요청이 아닌 것으로 간주됩니다.

브라우저는 이 두 요청을 다르게 처리합니다.

3. 단순요청 3.1 기본과정

간단한 요청의 경우 브라우저가 CORS 요청을 직접 발행합니다. 구체적으로는 헤더 정보에 Origin 필드를 추가하는 것입니다.

다음은 브라우저가 이 교차 출처 AJAX 요청을 단순 요청으로 인식하고 자동으로 헤더 정보에 Origin 필드를 추가하는 예입니다.

GET /cors HTTP/1.1Origin: http://api.bob.comHost: api.alice.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...

위 헤더 정보에서 Origin 필드는 이 요청이 어느 소스에서 왔는지(프로토콜 + 도메인 이름 + 포트)를 나타내는 데 사용됩니다. 서버는 이 값을 기반으로 요청에 대한 동의 여부를 결정합니다.

Origin에 지정된 소스가 권한 범위 내에 있지 않으면 서버는 정상적인 HTTP 응답을 반환합니다. 브라우저가 이 응답의 헤더 정보에 Access-Control-Allow-Origin 필드가 포함되어 있지 않음을 발견하면(자세한 내용은 아래 참조) 뭔가 잘못되었음을 알고 오류가 발생하며, 이는 XMLHttpRequest 콜백 함수에 의해 포착됩니다. >. HTTP 응답 상태 코드가 200일 수 있으므로 이 오류는 상태 코드로 식별할 수 없습니다. onerror

에서 지정한 도메인 이름이 권한 범위 내에 있는 경우 서버에서 반환하는 응답에는 여러 헤더 정보 필드가 더 포함됩니다. Origin

Access-Control-Allow-Origin: http://api.bob.comAccess-Control-Allow-Credentials: trueAccess-Control-Expose-Headers: FooBarContent-Type: text/html; charset=utf-8

위 헤더 정보 중 CORS 요청과 관련된 필드가 3개 있는데, 모두

로 시작합니다. Access-Control-

(1) 접근 제어-허용-원본

이 필드는 필수입니다. 해당 값은 요청 중

필드 값이거나 모든 도메인 이름의 요청이 허용됨을 나타내는 Origin입니다. *

(2) 액세스 제어 허용 자격 증명

이 필드는 선택사항입니다. 해당 값은 쿠키 전송을 허용할지 여부를 나타내는 부울 값입니다. 기본적으로 쿠키는 CORS 요청에 포함되지 않습니다.

으로 설정합니다. 이는 서버가 쿠키가 요청에 포함되어 서버로 전송되도록 명시적으로 허용한다는 의미입니다. 이 값은 true로만 설정할 수 있습니다. 서버가 브라우저에서 쿠키 전송을 원하지 않는 경우 이 필드를 삭제하면 됩니다. true

(3) 액세스 제어 노출 헤더

이 필드는 선택사항입니다. CORS 요청을 할 때

객체의 XMLHttpRequest 메서드는 getResponseHeader(), Cache-Control, Content-Language, Content-Type, Expires, Last-Modified 등 6개의 기본 필드만 가져올 수 있습니다. 다른 필드를 가져오려면 Pragma에 해당 필드를 지정해야 합니다. 위의 예에서는 Access-Control-Expose-Headers이 getResponseHeader('FooBar') 필드의 값을 반환할 수 있음을 지정합니다. FooBar

Credentials 속성이 포함된 3.2

위에서 언급했듯이 CORS 요청은 기본적으로 쿠키 및 HTTP 인증 정보를 전송하지 않습니다. 서버에 쿠키를 보내려면 서버의 동의가 필요하며

필드를 지정해야 합니다. Access-Control-Allow-Credentials

<code>Access-Control-Allow-Credentials: true</code>

반면에 개발자는 AJAX 요청에서

속성을 ​​활성화해야 합니다. withCredentials

<code>var xhr = new XMLHttpRequest();xhr.withCredentials = true;</code>

否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

但是，如果省略withCredentials设置，有的浏览器还是会一起发送Cookie。这时，可以显式关闭withCredentials。

<code>xhr.withCredentials = false;</code>

需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

四、非简单请求4.1 预检请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

下面是一段浏览器的JavaScript脚本。

var url = 'http://api.alice.com/cors';var xhr = new XMLHttpRequest();xhr.open('PUT', url, true);xhr.setRequestHeader('X-Custom-Header', 'value');xhr.send();

上面代码中，HTTP请求的方法是PUT，并且发送一个自定义头信息X-Custom-Header。

浏览器发现，这是一个非简单请求，就自动发出一个"预检"请求，要求服务器确认可以这样请求。下面是这个"预检"请求的HTTP头信息。

<code>OPTIONS /cors HTTP/1.1Origin: http://api.bob.comAccess-Control-Request-Method: PUTAccess-Control-Request-Headers: X-Custom-HeaderHost: api.alice.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...</code>

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

除了Origin字段，"预检"请求的头信息包括两个特殊字段。

（1）Access-Control-Request-Method

该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

（2）Access-Control-Request-Headers

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

4.2 预检请求的回应

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

HTTP/1.1 200 OKDate: Mon, 01 Dec 2008 01:15:39 GMTServer: Apache/2.0.61 (Unix)Access-Control-Allow-Origin: http://api.bob.comAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderContent-Type: text/html; charset=utf-8Content-Encoding: gzipContent-Length: 0Keep-Alive: timeout=2, max=100Connection: Keep-AliveContent-Type: text/plain

上面的HTTP回应中，关键的是Access-Control-Allow-Origin字段，表示<a href="http://api.bob.com">http://api.bob.com</a>可以请求数据。该字段也可以设为星号，表示同意任意跨源请求。

Access-Control-Allow-Origin: *

如果浏览器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

XMLHttpRequest cannot load http://api.alice.com.Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

服务器回应的其他CORS相关字段如下。

<code>Access-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderAccess-Control-Allow-Credentials: trueAccess-Control-Max-Age: 1728000</code>

（1）Access-Control-Allow-Methods

该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

（2）Access-Control-Allow-Headers

如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

（3）Access-Control-Allow-Credentials

该字段与简单请求时的含义相同。

（4）Access-Control-Max-Age

이 필드는 선택 사항이며 실행 전 요청의 유효 기간을 초 단위로 지정하는 데 사용됩니다. 위 결과에서 유효 기간은 20일(1728000초)입니다. 이는 응답이 1728000초(20일) 동안 캐시될 수 있음을 의미합니다. 이 기간 동안에는 또 다른 실행 전 요청을 실행할 필요가 없습니다.

4.3 브라우저의 정상적인 요청과 응답

서버가 "실행 전" 요청을 전달하면 브라우저의 모든 일반 CORS 요청은 단순 요청과 동일하며 Origin 헤더 정보 필드가 있습니다. 서버의 응답에는 Access-Control-Allow-Origin 헤더 정보 필드도 있습니다.

다음은 "preflight" 요청 이후 브라우저의 일반적인 CORS 요청입니다.

PUT /cors HTTP/1.1Origin: http://api.bob.comHost: api.alice.comX-Custom-Header: valueAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...

위 헤더 정보의 Origin 필드는 브라우저에 의해 자동으로 추가됩니다.

다음은 서버의 정상적인 응답입니다.

Access-Control-Allow-Origin: http://api.bob.comContent-Type: text/html; charset=utf-8

위 헤더 정보 중 모든 응답에는 Access-Control-Allow-Origin 필드가 포함되어야 합니다.

5. JSONP와의 비교

CORS는 JSONP와 동일한 목적으로 사용되지만 JSONP보다 더 강력합니다.

JSONP는 GET 요청만 지원하고 CORS는 모든 유형의 HTTP 요청을 지원합니다. JSONP의 장점은 이전 브라우저를 지원하고 CORS를 지원하지 않는 웹사이트에서 데이터를 요청할 수 있다는 것입니다.

(끝)