原生JS之CORS

2019-09-23 15:35:24 作者：互联网

CORS全称是：Cross-Origin Resource Sharing，跨域资源共享。是解决AJAX跨域的一种方案。正常情况下，AJAX 发起跨域请求后，浏览器拒绝接收响应，会报跨域的错。CORS是W3C的一个标准，他新增了一些机制，可以使得浏览器能够接收跨域的响应。虽然JSONP能够实现跨域，但它不够正统，存在一些缺陷，JSONP只支持GET请求，这就需要一种更加正统的方法，而不是像JSONP一样利用了 <script> 标签可以加载跨域JS的特性来实现跨域，这样的法更像是曲线救国。那么有可不可以从本质上实现跨域访问呢，并且不局限于GET请求，这就是CORS。

小结：CORS是实现AJAX跨域的一种方案。

如何实现CORS

先知道怎么用，再搞懂原理。实现CORS很简单，前端的AJAX代码不需要任何改动，只需要后端设置一下响应头的 Access-Control-Allow-Origin 字段就能够实现跨域访问。将 Access-Control-Allow-Origin 的值设置成请求方的域名即可，当然也可以设置成 * ，即表示，任何域名的请求都可以访问。例：请求方域名是 http://www.a.com ，假设我需要向 http://www.b.com 发接口请求。那么服务需要响应端设置响应头 Access-Control-Allow-Origin: http://www.a.com 。这样就能够顺利请求了。

小结：后端设置响应头的 Access-Control-Allow-Origin 字段。

CORS的本质

同源策略的本质

首先，你要搞清楚，是同源策略导致了跨域问题。根本原因是浏览器做了限制，浏览器不让你从别的地方去请求数据，即使请求发出去了，浏览器也不会接受的响应的，这是一种安全策略。

CORS的本质

如何使得浏览器接受跨域的响应呢？这就得让浏览器知道，噢，这个响应是安全的，是可以接收的。那么浏览器又通过什么东西知道响应是安全的，是能够接收的呢？当然是响应头了。那么只需要在响应头里告诉浏览器，这个响应是没问题的，你接收吧。那么究竟怎么做呢，具体是如何在响应头里进行相关设置呢，这就是CORS规定的，这就是CORS标准。

跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。CORS定义了在访问跨源资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的HTTP头部，让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

小结:CORS的本质是通过HTTP响应头告诉浏览器，响应是安全的，可以接收的。

IE中的CORS

对于IE10以下，CORS的实现并不是在XMLHTTPRequest对象上实现的(IE支持XHR对象，只是CORS不是在XHR对象上实现的)，对于IE10 - ，CORS是在IE独有的 XDomainRequest (XDR) 上实现的，这个对象和XHR一样，用法和功能几乎一样。

XDR的用法：

if(window.XDomainRequest){
  var xdr = new XDomainRequest();
  xdr.open("get", "http://example.com/api/method");
  xdr.onprogress = function () {
    //Progress
  };
  xdr.ontimeout = function () { 
    //Timeout
  };
  xdr.onerror = function () { 
    //Error Occured
  };
  xdr.onload = function() {
    //success(xdr.responseText);
  }
  setTimeout(function () {
    xdr.send();
  }, 0);
}
复制代码

XDR的用法基本和XHR一样，有些细微的地方需要注意：

cookie 不会随请求发送，也不会随响应返回。
只能设置请求头部信息中的 Content-Type 字段。
不能访问响应头部信息。
只支持 GET 和 POST 请求。

标签：原生,浏览器,跨域,JS,响应,xdr,CORS,请求
来源： https://blog.csdn.net/ZM11111001100/article/details/101208006