** Cross-origin resource sharing 跨域资源共享  **

定义：当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域 HTTP 请求

比如：站点http://www.domain-a.com 的某 HTML 页面通过 <img> 的 src 请求 http://www.domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。


我们主要讲 ajax请求跨域问题

====== 什么是ajax请求 ======
Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 
本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

异步 : 某段程序执行时不会阻塞其他程序的执行, 表现形式是程序的执行顺序不依赖程序本身的书写顺序, 相反的情况依次执行, 那就是同步核心在于不会阻塞程序的执行, 从而提升整体执行效率

<code javascript>
// XMLHttpRequest是浏览器内置的对象。

  var xhr = new XMLHttpRequest();
        xhr.open('get','01.php');
        xhr.send(null);
        xhr.onreadystatechange = function(){
         if(xhr.status == 200 && xhr.readyState == 4){
             /*获取到XML格式内容  放回的是DOM对象  document*/
             var xml = xhr.responseXML;
             /*通过选着器可以获取到xml的数据*/
             console.log(xml.querySelectorAll('array')[0].querySelector('src').innerHTML);
         }
    }
    
</code>

F.Y.I. 

  * Ajax详解: https://www.cnblogs.com/liu666/p/5842333.html
  * Fetch API: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
====== ajax跨域调用时 ======
浏览器对于跨域的ajax请求，他会自动给header中 加入一个: 'Origin'= window.location.origin

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求：
<code>
method:  GET | HEAD | POST
header： Accept、Accept-Language、Content-Language、Content-Type

其中:Content-Type: text/plain | multipart/form-data | application/x-www-form-urlencoded

实际在发送过程中浏览器自动添加：
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
对于跨域：Origin: http://foo.example

</code>

非简单请求：
<code>
只要不符合以上3大条件的就是非简单请求。浏览器对于非简单请求，先要做预检preflight，如下图。

关于跨域附带凭证。 默认，浏览器对于XMLHttpRequest或Fetch请求，都不会发送凭证，这里我们指cookie
为了能让请求带上cookie。所以客户端需要做点事情，服务端也要做点事情。
withCredentials = true  不管是你是jquery或者axios或者其他的封装js lib.

而服务端也必须做一些事情：
而对于浏览器有一个规定，当附带凭证的时候，服务端返回的 Access-Control-Allow-Origin 不允许设置为 *。
所以为了支持一个服务层能给多个客户端使用：需要让服务层自己根据客户端的请求做判断。



</code>

{{https://mdn.mozillademos.org/files/14289/prelight.png?500|  }}








F.Y.I. 

  * 跨域资源请求：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
  * 服务端访问控制： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Server-Side_Access_Control
  * CORS的内部机制: http://www.ruanyifeng.com/blog/2016/04/cors.html