如何理解CORS

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

　一、簡(jiǎn)介

　二、兩種請(qǐng)求

（1) 請(qǐng)求方法是以下三種方法之一：  

• HEAD
• GET
• POST

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

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

　三、簡(jiǎn)單請(qǐng)求

　　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;

   
     

    
    

　四、非簡(jiǎn)單請(qǐng)求

　　4.1 預(yù)檢請(qǐng)求

    
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 預(yù)檢請(qǐng)求的回應(yīng)

    
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 瀏覽器的正常請(qǐng)求和回應(yīng)

    
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的比較

上述內(nèi)容就是如何理解CORS，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。