关于跨域CORS，用最通俗的话说得最清楚的一篇文章

1.跨域只跟浏览器有关。
   如果你不用浏览器，直接通过webkit API访问就不存在跨域的问题。
   这样子有人就会问了，不用浏览器访问，那不是很危险？跨域限制主要是保护访问你的网站的客户的安全，一般人应该都是用浏览器访问的。如果他懂得用api访问，这个水平的客户也不会有危险。
 

2.域，简单来说就是浏览器地址栏的网址（域名部分），以及你要访问的网址（域名部分）。
  如果地址栏的域名，跟你要访问的地址的域名不一样，那就域不一样了，这就叫做跨域了。
  所以说如果不用浏览器访问的话，就不存在跨域了。
 

3.浏览器是怎么限制我们跨域的。
   当浏览器发现我们要访问的域跟地址栏的域不一样的时候，会做出以下举动。 
   1.当进行简单访问时（Simple Requests ）会直接把请求发给服务器
   2.当发现不是简单的访问时（Preflighted Requests），就会先向服务器发送一个OPTIONS请求。得到正确的回答之后，再发送原来的请求。

 

什么时候Simple Requests
1、请求方法必须是GET/HEAD/POST之一
2、POST请求的Content-Type只能是application/x-www-form-urlencoded，multipart/form-data或text/plain之一
3、没有自定义的header字段
符合以上条件（1 and 2 and 3）的请求，才是Simple Requests。

什么是Preflighted Request（带预检的跨域请求）
1、请求方法不是GET/HEAD/POST
      比如PUT，DELETE
2、POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain.
      比如xml
3、请求设置了自定义的header字段
符合以上条件（1 or 2 or 3）的请求，是Preflighted Request。

 

读到这里，大家应该明白是谁限制你跨域了。对，就是浏览器。
当你发送Simple Requests请求，浏览器会帮你把请求发出去。服务器也会响应你的请求，返回你一个response。但是浏览器收到response之后，如果发现header里没有Access-Control-Allow-Origin的话，就直接把response丢掉不给你了。所以说不是服务器不给你响应，而是浏览器从中捣鬼，把响应丢掉不给你了。

当你发送Preflighted Request请求时，浏览器会偷偷先跟服务器联系(发送一个OPTIONS请求)，如果服务器的回答里没有Access-Control-*的话，浏览器就会直接把你的请求给扔掉了，根本不帮你发出请求。

 

附带凭证信息的请求(withCredentials 属性)
这种情况需要前端和后端配合一起才能完成跨域访问。
什么是附带凭证信息的请求，其实就是带有Cookie的请求，和BASIC认证请求。
前后端需要做的设置是
前端：withCredentials设为true
后端：Access-Control-Allow-Credentials:true
         Access-Control-Allow-Origin:http://test.com:1234/
         withCredentials 的请求发送响应的时候, 服务器端必须明确指定允许请求的域名,不能使用'*'.如果响应头是这样的:Access-Control-Allow-Origin: * ,则响应会失败.

 

本文章主要让大家理解基本的原理，上面的有一些话说的不是很严谨。
如果用学术性语言，滴水不漏的说的话，估计大家就会云里雾里了。
希望大家能get到要点。

 

 

 

-----------------------------

参考文章 
http请求中的 OPTIONS 详解
https://blog.csdn.net/qq_37054881/article/details/89707204

Ajax 请求中出现OPTIONS（Request Method: OPTIONS）
https://blog.csdn.net/qq_41604686/article/details/100512571

浏览器跨域方法与基于Fetch的Web请求最佳实践
https://segmentfault.com/a/1190000006095018

https://www.v2ex.com/t/340648