面试官问我CORS跨域，我直接一套操做斩杀！

前言

咱们都知道因为同源策略的存在,致使咱们在跨域请求数据的时候很是的麻烦。首先阻挡咱们的所谓同源究竟是什么呢?，所谓同源就是浏览器的一个安全机制,不一样源的客户端脚本没有在明确受权的状况下,不能读写对方资源。因为存在同源策略的限制,而又有须要跨域的业务,因此就有了CORS的出现。

咱们都知道,jsonp也能够跨域,那为何还要使用CORS呢

• jsonp只可使用 GET 方式提交
• 很差调试,在调用失败的时候不会返回任何状态码
• 安全性,万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？全部调用这个jsonp的网站都会存在漏洞。因而没法把危险控制在一个域名下…因此在使用jsonp的时候必需要保证使用的jsonp服务必须是安全可信的。

开始CORS

CORS是一个W3C标准,全称是"跨域资源共享"（Cross-origin resource sharing），他容许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服啦 AJAX 只能同源使用的限制

CORS须要浏览器和服务器同时支持，整个 CORS通讯过程，都是浏览器自动完成不须要用户参与，对于开发者来讲，CORS的代码和正常的 ajax 没有什么差异，浏览器一旦发现跨域请求，就会添加一些附加的头信息，

CORS这么好吗，难道就没有缺点嘛？

答案确定是NO，目前全部最新浏览器都支持该功能，可是万恶的IE不能低于10

简单请求和非简单请求

浏览器将CORS请求分红两类：简单请求和非简单请求

简单请求

凡是同时知足如下两种状况的就是简单请求，反之则非简单请求，浏览器对这两种请求的处理不同

• 请求方法是如下方三种方法之一
  • HEAD
  • GET
  • POST
• HTTP的头信息不超出如下几种字段
  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain

对于简单请求来讲，浏览器之间发送CORS请求，具体来讲就是在头信息中，增长一个origin字段，来看一下例子

GET /cors? HTTP/1.1
Host: localhost:2333
Connection: keep-alive
Origin: http://localhost:2332
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Accept: */* Referer: http://localhost:2332/CORS.html Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9 If-None-Match: W/"1-NWoZK3kTsExUV00Ywo1G5jlUKKs" 复制代码

上面的头信息中，Origin字段用来讲名本次请求来自哪一个源,服务器根据这个值,决定是否赞成此次请求。

若是Origin指定的源不在容许范围以内,服务器就会返回一个正常的HTTP回应,而后浏览器发现头信息中没有包含Access-Control-Allow-Origin 字段,就知道出错啦,而后抛出错误,反之则会出现这个字段(实例以下)

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
复制代码

• Access-Control-Allow-Origin 这个字段是必须的,表示接受那些域名的请求(*为全部)

• Access-Control-Allow-Credentials 该字段可选, 表示是否能够发送cookie

• Access-Control-Expose-Headers 该字段可选,XHMHttpRequest对象的方法只可以拿到六种字段: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma ,若是想拿到其余的须要使用该字段指定。

若是你想要连带Cookie一块儿发送,是须要服务端和客户端配合的

// 服务端
Access-Control-Allow-Credentials: true
// 客户端
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
// 可是若是省略withCredentials属性的设置,有的浏览器仍是会发送cookie的
xhr.withCredentials = false;
复制代码

非简单请求

非简单请求则是不知足上边的两种状况之一,好比请求的方式为 PUT,或者请求头包含其余的字段

非简单请求的CORS请求是会在正式通讯以前进行一次预检请求

浏览器先询问服务器,当前网页所在的域名是否能够请求您的服务器,以及可使用那些HTTP动词和头信息,只有获得正确的答复,才会进行正式的请求

// 前端代码
var url = 'http://localhost:2333/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
复制代码

因为上面的代码使用的是 PUT 方法,而且发送了一个自定义头信息.因此是一个非简单请求,当浏览器发现这是一个非简单请求的时候,会自动发出预检请求,看看服务器可不能够接收这种请求,下面是"预检"的 HTTP 头信息

OPTIONS /cors HTTP/1.1
Origin: localhost:2333
Access-Control-Request-Method: PUT // 表示使用的什么HTTP请求方法
Access-Control-Request-Headers: X-Custom-Header // 表示浏览器发送的自定义字段
Host: localhost:2332
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
User-Agent: Mozilla/5.0...
复制代码

"预检"使用的请求方法是 OPTIONS , 表示这个请求使用来询问的,

预检请求后的回应，服务器收到"预检"请求之后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段之后，确认容许跨源请求，就能够作出回应。

预检的响应头:

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://localhost:2332 // 表示http://localhost:2332能够访问数据
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
复制代码

若是浏览器否认了"预检"请求,会返回一个正常的HTTP回应,可是没有任何CORS的头相关信息,这是浏览器就认定,服务器不容许这次访问,从而抛出错误

预检以后的请求

当预检请求经过以后发出正经的HTTP请求,还有一个就是一旦经过了预检请求就会,请求的时候就会跟简单请求,会有一个Origin头信息字段。

经过预检以后的,浏览器发出发请求

PUT /cors HTTP/1.1
Origin: http://api.bob.com // 经过预检以后的请求,会自动带上Origin字段
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
复制代码

感谢

谢谢你读完本篇文章，但愿对你能有所帮助，若有问题欢迎各位指正。

我是蛙人(✿◡‿◡)，若是以为写得能够的话，请点个赞吧❤。

感兴趣的小伙伴能够加入 [ 前端娱乐圈交流群 ] 欢迎你们一块儿来交流讨论

写做不易，「点赞」+「在看」+「转发」 谢谢支持❤

往期推荐

《什么场景下使用Render函数，如何配置JSX》

《分享15个Webpack实用的插件！！！》

《手把手教你写一个Vue组件发布到npm且可外链引入使用》

《分享12个Webpack中经常使用的Loader》

《聊聊什么是CommonJs和Es Module及它们的区别》

《这些工做中用到的JavaScript小技巧你都知道吗？》

《【建议收藏】分享一些工做中经常使用的Git命令及特殊问题场景怎么解决》