瀏覽器將CORS請求分成兩類：簡單請求和非簡單請求。簡單請求在之前部落格中總結過了，詳見傳送門
這裡主要總結一下非簡單請求。非簡單請求是那種對伺服器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type欄位的型別是application/json。

預檢請求

非簡單請求的CORS請求，會在正式通訊之前，增加一次HTTP查詢請求，稱為預檢請求（preflight）。
瀏覽器先詢問伺服器，當前網頁所在的域名是否在伺服器的許可名單之中，以及可以使用哪些HTTP動詞和頭資訊欄位。只有得到肯定答覆，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。
Demo:

<script type="text/javascript">
        function createXhr(){
            if(typeof XMLHttpRequest){
                return new XMLHttpRequest();
            }else if(typeof ActiveXObject){
                return new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        var xhr=createXhr();
        xhr.onreadystatechange=function
 
(){
            if(xhr.readyState==4){
                if(xhr.status==200){
     var data = JSON.parse(xhr.responseText);
    console.log(data.name+'--'+data.age+'--'+data.job);//lisi--24--worker
                }
            }
        }
        xhr.open("put","http://www.abc.com/mywork/21code/example.php",true
 
);
        xhr.setRequestHeader('X-Custom-Header', 'value');
        xhr.send(null);
    </script>

example.php

<?php
    header("Content-Type: text/plain");//文字型別
    //允許的域名
    header("Access-Control-Allow-Origin:http://www.example.com");
    //響應型別
    header("Access-Control-Allow-Methods: GET, POST, PUT");
    //頭部欄位
    header("Access-Control-Allow-Headers: X-Custom-Header");
    $res = array('name'=>'lisi','age'=>24,'job'=>'worker');
    echo json_encode($res);
?>

上面程式碼中，HTTP請求的方法是PUT，並且傳送一個自定義頭資訊X-Custom-Header。
瀏覽器發現，這是一個非簡單請求，就自動發出一個預檢請求，要求伺服器確認可以這樣請求。下面是這個預檢請求的HTTP頭資訊以及預檢請求的迴應。

預檢請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭資訊裡面，關鍵欄位是Origin，表示請求來自哪個源。
除了Origin欄位，預檢請求的頭資訊包括兩個特殊欄位：

• Access-Control-Request-Method
  該欄位是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法，上面例子中是PUT。
• Access-Control-Request-Headers
  該欄位是一個逗號分隔的字串，指定瀏覽器CORS請求會額外發送的頭資訊欄位，上例是X-Custom-Header。
  
  伺服器收到預檢請求後，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers欄位以後，確認允許跨源請求，就可以做出迴應。
  上面的HTTP迴應中，關鍵的是Access-Control-Allow-Origin欄位，表示http://www.example.com可以請求資料。該欄位也可以設為星號，表示同意任意跨源請求。
  如果瀏覽器否定了預檢請求，會返回一個正常的HTTP迴應，但是沒有任何CORS相關的頭資訊欄位。這時，瀏覽器就會認定，伺服器不同意預檢請求，因此觸發一個錯誤，被XMLHttpRequest物件的onerror回撥函式捕獲。控制檯會打印出相應的報錯資訊。

伺服器響應的其他CORS相關欄位

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 180000

• Access-Control-Allow-Methods
  該欄位必需，它的值是逗號分隔的一個字串，表明伺服器支援的所有跨域請求的方法。注意，返回的是所有支援的方法，而不單是瀏覽器請求的那個方法。這是為了避免多次預檢請求。
• Access-Control-Allow-Headers
  如果瀏覽器請求包括Access-Control-Request-Headers欄位，則Access-Control-Allow-Headers欄位是必需的。它也是一個逗號分隔的字串，表明伺服器支援的所有頭資訊欄位，不限於瀏覽器在預檢中請求的欄位。
• Access-Control-Allow-Credentials
  該欄位可選。它的值是一個布林值，表示是否允許傳送Cookie。預設情況下，Cookie不包括在CORS請求之中。設為true，即表示伺服器明確許可，Cookie可以包含在請求中，一起發給伺服器。這個值也只能設為true，如果伺服器不要瀏覽器傳送Cookie，刪除該欄位即可。
• Access-Control-Max-Age
  該欄位可選，用來指定本次預檢請求的有效期，單位為秒。上面結果中，有效期是180000秒，即允許快取該條響應180000秒，在此期間，不用發出另一條預檢請求。

瀏覽器的正常請求和響應

一旦伺服器通過了預檢請求，以後每次瀏覽器正常的CORS請求，就都跟簡單請求一樣，會有一個Origin頭資訊欄位。伺服器的響應，也都會有一個Access-Control-Allow-Origin頭資訊欄位。
經過預檢請求後，正式通訊的請求與相應如下所示：

上面請求頭資訊的Origin欄位是瀏覽器自動新增的，Access-Control-Allow-Origin欄位是每次響應都必定包含的。

最後要對阮一峰大大送上最誠摯的敬意，博文寫的言簡意賅，自己從中獲益良多，非常感謝大大的無私分享。給自己加個油，fighting！！！
參考博文：
跨域資源共享 CORS 詳解