解如何利用CORS跨域，是时候让前端来指挥一次后端同学开发了( 二 ) _CORS跨域

图12
提示设置Access-Control-Allow-Headers ，那我们就设置一下。

文章插图
图13
再刷新页面，请求正常了，服务端也能拿到token的值了。
简单请求与非简单请求图13中我们拿到了token的值，此时我们再去瞧瞧浏览器中的Network ，会发现页面发送了两个请求，第一个请求的method是OPTIONS ，这是怎么回事呢？

文章插图
图14
原来cors跨域也分简单请求和非简单请求。
简单请求条件如下：

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

图11中我们设置了token请求头，显然不满足以上条件，所以是非简单请求。非简单请求的CORS请求会在正式通信之前增加一次HTTP查询请求，称为预检请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。预检请求用的请求方法是OPTIONS ，表示这个请求是用来询问的。
我们现在尝试发送一次PUT请求，看看会有什么现象？

文章插图
图15
不出所料，浏览器再次报错！

文章插图
图16
提示我们设置Access-Control-Allow-Methods ，那就只能设置了！

文章插图
图17
再次刷新页面，现在请求正常了！我们回头看一下预检请求，

文章插图
图18
不得不说，浏览器在访问跨域接口时真的是非常的小心，当然这一切都是为了安全考虑。即使这样，现在网络中也不乏XSS、CSRF等攻击。
总结17年夏天作者去头条面试，当时笔试有这么一道题“如果浏览器请求跨域，那么这个请求还能到达服务器吗？如果能，服务器会返回什么？” 。如果你读完本文，并且能充分理解，我相信这道题肯定不在话下。跨域在业务中经常遇到，大部分后端同学并不知道什么叫跨域，更不清楚该如何解决。作为前端的你，这时候就可以大显身手了！

【解如何利用CORS跨域，是时候让前端来指挥一次后端同学开发了】