【前端成长之路】使用CORS实现跨域

[AmamiyaCx]

CORS（跨域资源共享）

CORS是一个W3C标准，全称是跨域资源共享（Cross-origin-resource-sharing）

它允许浏览器向跨源服务器发起Ajax请求，从而克服了Ajax只能同源使用的限制

CORS需要浏览器和服务器同时支持，也是目前主流的跨域解决方案之一

两种请求

浏览器将CORS请求分为两类，简单请求和复杂请求。

简单请求

（1）请求方法属于下面之一

• HEAD
• GET
• POST

（2）HTTP的头信息不超过以下内容

• Accept
• Accept-language
• Content-language
• Content-Type的值为application/x-www-form-urlencoded、multipart/form-data、text-plain

### 复杂请求

不满足简单请求的就属于简单请求

CORS解决跨域的步骤

如果是简单请求，浏览器会自动在请求头中添加一个Origin字段，用来表明此次请求来自哪个源（协议 + 域名 + 端口）

如果是复杂请求，浏览器会在正式请求发送前发送一个option预检请求。预检请求相当于一个缩小版的真实请求，其中会带上真实请求的请求源地址、请求方法、自定义请求头等一些信息向服务器询问这些内容是否在服务器的允许范围内

服务器收到请求后，如果是简单请求，origin指定的源不在允许范围内的话，服务器会返回一个正常的http响应，但是不包含Access-Control-Allow-Origin。浏览器收到响应后发现不存在Access-Control-Allow-Origin字段，就知道出错了，然后抛出错误。反之则请求成功。

如果是复杂请求，浏览器收到预检请求后会检查预检请求中携带的信息，确认允许后才会做出回应。一旦服务器通过了预检请求，解下的复杂请求都会像简单请求一样会有一个origin请求头信息，服务器的回应也都会有一个Access-Control-Allow-Origin响应头信息

与JSONP相比

CORS与JSONP的使用目的相同，但是比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。