如何理解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，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。