如何理解CORS

本篇文章為大家展示了如何理解CORS，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

　一、簡介

　二、兩種請求

（1) 請求方法是以下三種方法之一：  

• HEAD
• GET
• POST

（2）HTTP的頭信息不超出以下幾種字段：  

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

　三、簡單請求

　　3.1 基本流程

    
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

   
     

    
    

    
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

   
     

    
    

　　3.2 withCredentials 屬性

    
Access-Control-Allow-Credentials: true

   
     

    
    

    
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

   
     

    
    

    
xhr.withCredentials = false;

   
     

    
    

　四、非簡單請求

　　4.1 預檢請求

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

   
     

    
    

    
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

   
     

    
    

　　4.2 預檢請求的回應

    
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

   
     

    
    

    
Access-Control-Allow-Origin: *

   
     

    
    

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

   
     

    
    

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

   
     

    
    

　　4.3 瀏覽器的正常請求和回應

    
PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

   
     

    
    

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

   
     

    
    

　五、與JSONP的比較

上述內容就是如何理解CORS，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。