一个前后端分离项目，前端兄弟忙不开我帮忙搞了下前端，遇到了一些跨域的问题，但是网上关于跨域访问大部分说的都是跨域访问的定义以及跨域访问的解决办法。但是并没有多少人说明白跨域访问的流程以及拦截过程。到底是浏览器在请求前拒绝访问不同源URL？还是在请求非同源URL后拒绝加载数据呢？那么我将在下文中解决下这个疑问。
假设有这样的环境：
WEB容器：部署在ngix上（ngix没有设置代理转发），ip127.0.0.1:8001
后端1：部署在10.141.82.170:19026，地址不同，端口号不同，与web容器非同源
设置响应头，允许跨域访问
:"Access-Control-Allow-Origin", "*"
"Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept"
"Access-Control-Allow-Methods","GET, POST,PUT,DELETE"
后端2：部署在127.0.0.1:19026，地址不同，端口号不同，与web容器非同源
未设置允许跨域访问
下面我们来做两组实验：
一、在127.0.0.1:8001/index.html页面，请求10.141.82.170:19026
1、响应头：
红框内"Access-Control-Allow-Origin","*"，告知浏览器可以跨域访问
2、response
3、页面
浏览器收到response信息，并且检查到响应头中有"Access-Control-Allow-Origin", "*"，因此将数据展示出来
二、接下来看请求不带允许跨域访问的172
在127.0.0.1:8001/index.html页面，请求10.141.82.172:19026
1、 响应头
没有表示能够跨域访问的请求头信息
2、 response
127.0.0.1没有设置允许跨域访问，但是依然请求到了数据。这说明跨域访问的限制并不是浏览器限制发送请求，而是浏览器阻止了请求后数据的加载渲染
3、 页面
页面收到了信息，但是没有检查到响应头中有允许跨域访问的设置，因此没有对数据进行加载渲染。并且报出下面的异常：
No 'Access-Control-Allow-Origin' header ispresent on the requested resource
三、总结
跨域访问限制的流程
1、 浏览器发送跨域请求
2、 接收response数据
3、 检查响应头
（1）、如果响应头中没有允许跨域访问的配置，则不加载，并报出响应异常
（2）、如果响应头中有允许跨域访问的设置，正常加载数据