CORS跨域

2019年8月21日 243次阅读 来源: 张炳

>>>点击猎取更多文章<<<

当一个资本从与该资本本身地点的服务器差别的域或端口请求一个资本时，资本会提议一个跨域 HTTP 请求。

比方，站点 http://domain-a.com 的某 HTML 页面经由过程 <img> 的 src 请求 http://domain-b.com/image.jpg。收集上的很多页面都邑加载来自差别域的CSS样式表，图象和剧本等资本。

出于平安缘由，浏览器限定从剧本内提议的跨源HTTP请求。 比方，XMLHttpRequest和Fetch API遵照同源战略。 这意味着运用这些API的Web运用程序只能从加载运用程序的统一个域请求HTTP资本，除非运用CORS头文件,，实在跨域并不是不一定是浏览器限定了提议跨站请求，而也多是跨站请求能够一般提议，然则返回效果被浏览器阻拦了。最好的例子是 CSRF跨站进击道理，请求是发送到了后端服务器不管是不是跨域！注重：有些浏览器不许可从 HTTPS 的域跨域接见 HTTP，比方 Chrome 和 Firefox，这些浏览器在请求还未发出的时刻就会阻拦请求，这是一个惯例。

《CORS跨域》

跨域资本共享（ CORS ）机制许可 Web 运用服务器举行跨域接见掌握，从而使跨域数据传输得以平安举行。浏览器支撑在 API 容器中（比方 XMLHttpRequest 或 Fetch ）运用 CORS，以下降跨域 HTTP 请求所带来的风险。

跨域资本共享范例（ cross-origin sharing standard ）许可在以下场景中运用跨域 HTTP 请求：

  • 由 XMLHttpRequest 或 Fetch 提议的跨域 HTTP 请求。
  • Web 字体 (CSS 中经由过程 @font-face 运用跨域字体资本), 因而，网站就可以够宣布 TrueType 字体资本，并只许可已受权网站举行跨站挪用。
  • WebGL 贴图
  • 运用 drawImage 将 Images/video 画面绘制到 canvas
  • 样式表（运用 CSSOM）
  • Scripts (未处置惩罚的非常)

概述

跨域资本共享范例新增了一组 HTTP 首部字段，许可服务器声明哪些源站有权限接见哪些资本。别的，范例请求，对那些能够对服务器数据发生副作用的 HTTP 请求要领（特别是 GET 以外的 HTTP 请求，或许搭配某些 MIME 范例的 POST 请求），浏览器必需起首运用 OPTIONS 要领提议一个预检请求（preflight request），从而获知服务端是不是许可该跨域请求。服务器确认许可以后，才提议现实的 HTTP 请求。在预检请求的返回中，服务器端也能够关照客户端，是不是须要照顾身份凭据（包括 Cookies 和 HTTP 认证相干数据）。

接下来的内容将议论相干场景，并理会该机制所触及的 HTTP 首部字段。

多少接见掌握场景

这里，我们运用三个场景来诠释跨域资本共享机制的事情道理。这些例子都运用 XMLHttpRequest 对象。

简朴请求

某些请求不会触发 CORS 预检请求。本文称如许的请求为“简朴请求”，请注重，该术语并不属于 Fetch （个中定义了 CORS）范例。若请求满足一切下述前提，则该请求可视为“简朴请求”：

  • 运用以下要领之一：
  • GET
  • HEAD
  • POST
  • Fetch 范例定义了对 CORS 平安的首部字段鸠合，不得工资设置该鸠合以外的其他首部字段。该鸠合为：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type （须要注重分外的限定）
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
  • Content-Type 的值仅限于以下三者之一：
  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded
  • 请求中的恣意XMLHttpRequestUpload 对象均没有注册任何事宜监听器；XMLHttpRequestUpload 对象能够运用 XMLHttpRequest.upload 属性接见。
  • 请求中没有运用 ReadableStream 对象。

比方说，假如站点 http://foo.example 的网页运用想要接见 http://bar.other 的资本。http://foo.example 的网页中能够包括相似于下面的 JavaScript 代码：

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/public-data/';
   
function callOtherDomain() {
  if(invocation) {    
    invocation.open('GET', url, true);
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}

客户端和服务器之间运用 CORS 首部字段来处置惩罚跨域权限：

《CORS跨域》

离别检视请求报文和相应报文：

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


HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[XML Data]

第 1~10 行是请求首部。第10行 的请求首部字段 Origin 表明该请求来源于
http://foo.exmaple。

第 13~22 行是来自于 http://bar.other 的服务端相应。相应中照顾了相应首部字段 Access-Control-Allow-Origin（第 16 行）。运用 Origin 和 Access-Control-Allow-Origin 就可以完成最简朴的接见掌握。本例中，服务端返回的 Access-Control-Allow-Origin: * 表明，该资本能够被恣意外域接见。假如服务端仅许可来自 http://foo.example 的接见，该首部字段的内容以下：

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

如今，除了
http://foo.example，别的外域均不能接见该资本（该战略由请求首部中的 ORIGIN 字段定义，见第10行）。Access-Control-Allow-Origin 应该为 * 或许包括由 Origin 首部字段所指明的域名。

预检请求

与前述简朴请求差别，“需预检的请求”请求必需起首运用 OPTIONS 要领提议一个预检请求到服务器，以获知服务器是不是许可该现实请求。”预检请求“的运用，能够防止跨域请求对服务器的用户数据发生未预期的影响。

当请求满足下述任一前提时，即应起首发送预检请求：

  • 运用了下面任一 HTTP 要领：
  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE
  • PATCH
  • 工资设置了对 CORS 平安的首部字段鸠合以外的其他首部字段。该鸠合为：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type (but note the additional requirements below)
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
  • Content-Type 的值不属于以下之一:
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
  • 请求中的XMLHttpRequestUpload 对象注册了恣意多个事宜监听器。
  • 请求中运用了ReadableStream对象。

以下是一个须要实行预检请求的 HTTP 请求：

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
    
function callOtherDomain(){
  if(invocation)
    {
      invocation.open('POST', url, true);
      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
      invocation.setRequestHeader('Content-Type', 'application/xml');
      invocation.onreadystatechange = handler;
      invocation.send(body); 
    }
}

上面的代码运用 POST 请求发送一个 XML 文档，该请求包括了一个自定义的请求首部字段（X-PINGOTHER: pingpong）。别的，该请求的 Content-Type 为 application/xml。因而，该请求须要起首提议“预检请求”。

 1.OPTIONS /resources/post-here/ 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.Origin: http://foo.example
10.Access-Control-Request-Method: POST
11.Access-Control-Request-Headers: X-PINGOTHER, Content-Type
12.
13.
14.HTTP/1.1 200 OK
15.Date: Mon, 01 Dec 2008 01:15:39 GMT
16.Server: Apache/2.0.61 (Unix)
17.Access-Control-Allow-Origin: http://foo.example
18.Access-Control-Allow-Methods: POST, GET, OPTIONS
19.Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
20.Access-Control-Max-Age: 86400
21.Vary: Accept-Encoding, Origin
22.Content-Encoding: gzip
23.Content-Length: 0
24.Keep-Alive: timeout=2, max=100
25.Connection: Keep-Alive
26.Content-Type: text/plain

预检请求完成以后，发送现实请求：

POST /resources/post-here/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
X-PINGOTHER: pingpong
Content-Type: text/xml; charset=UTF-8
Referer: http://foo.example/examples/preflightInvocation.html
Content-Length: 55
Origin: http://foo.example
Pragma: no-cache
Cache-Control: no-cache

<?xml version="1.0"?><person><name>Arun</name></person>


HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:40 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://foo.example
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 235
Keep-Alive: timeout=2, max=99
Connection: Keep-Alive
Content-Type: text/plain

[Some GZIP'd payload]

浏览器检测到，从 JavaScript 中提议的请求须要被预检。从上面的报文中，我们看到，第 1~12 行发送了一个运用 OPTIONS 要领的“预检请求”。 OPTIONS 是 HTTP/1.1 协定中定义的要领，用以从服务器猎取更多信息。该要领不会对服务器资本发生影响。 预检请求中同时照顾了下面两个首部字段：

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

首部字段 Access-Control-Request-Method 示知服务器，现实请求将运用 POST 要领。首部字段 Access-Control-Request-Headers 示知服务器，现实请求将照顾两个自定义请求首部字段：X-PINGOTHER 与 Content-Type。服务器据此决议，该现实请求是不是被许可。

第14~26 行动预检请求的相应，表明服务器将接收后续的现实请求。重点看第 17~20 行：

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

首部字段 Access-Control-Allow-Methods 表明服务器许可客户端运用 POST, GET 和 OPTIONS 要领提议请求。该字段与 HTTP/1.1 Allow: response header 相似，但仅限于在须要接见掌握的场景中运用。

首部字段 Access-Control-Allow-Headers 表明服务器许可请求中照顾字段 X-PINGOTHER 与 Content-Type。与 Access-Control-Allow-Methods 一样，Access-Control-Allow-Headers 的值为逗号支解的列表。

末了，首部字段 Access-Control-Max-Age 表明该相应的有用时候为 86400 秒，也就是 24 小时。在有用时候内，浏览器不必为统一请求再次提议预检请求。请注重，浏览器本身保护了一个最大有用时候，假如该首部字段的值超过了最大有用时候，将不会见效。

附带身份凭据的请求

Fetch 与 CORS 的一个风趣的特征是，能够基于 HTTP cookies 和 HTTP 认证信息发送身份凭据。一般而言，关于跨域 XMLHttpRequest 或 Fetch 请求，浏览器不会发送身份凭据信息。假如要发送凭据信息，须要设置 XMLHttpRequest 的某个特别标志位。

本例中，http://foo.example 的某剧本向 http://bar.other 提议一个GET 请求，并设置 Cookies：

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
    
function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}

第 7 即将 XMLHttpRequest 的 withCredentials 标志设置为 true，从而向服务器发送 Cookies。由于这是一个简朴 GET 请求，所以浏览器不会对其提议“预检请求”。然则，假如服务器端的相应中未照顾 Access-Control-Allow-Credentials: true ，浏览器将不会把相应内容返回给请求的发送者。

客户端与服务器端交互示比方下：

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


HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:34:52 GMT
Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
X-Powered-By: PHP/5.2.6
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 106
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain


[text/plain payload]

纵然第 11 行指定了 Cookie 的相干信息，然则，假如 bar.other 的相应中缺失 Access-Control-Allow-Credentials: true（第 19 行），则相应内容不会返回给请求的提议者。

    原文作者：张炳
    原文地址: https://segmentfault.com/a/1190000015641760
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞