总结前端跨域的拦截流程

前端跨域

跨域的来源是同源策略，为什么要有同源策略也是为了安全着想，防止遭受一些网络攻击，比如：csrf(跨站请求伪造)等，这里不作过多解释。

一句话总结：跨域的拦截不是浏览器在请求前拒绝访问不同源URL而是在请求非同源URL后拒绝加载数据！！！

拦截流程

• 请求允许跨域的访问的url
  • 响应头带有"Access-Control-Allow-Origin","*"，告知浏览器可以跨域访问
  • 浏览器收到response信息，并且检查到响应头中有"Access-Control-Allow-Origin", “*”，因此将数据展示出来
• 请求不允许跨域的访问的url
  • 响应头不带有"Access-Control-Allow-Origin","*"，没有表示能够跨域访问的请求头信息，所以浏览器不可以跨域访问
  • 页面收到了信息，但是没有检查到响应头中有允许跨域访问的设置，因此没有对数据进行加载渲染。并且报出下面的异常：
    No 'Access-Control-Allow-Origin' header ispresent on the requested resource

总结： 没有设置允许跨域访问，但是依然请求到了数据。这说明跨域访问的限制并不是浏览器限制发送请求，而是浏览器阻止了请求后数据的加载渲染

流程总概：

• 浏览器发送跨域请求
• 接收response数据
  • 看看响应头是否带有"Access-Control-Allow-Origin","*"这类允许跨域的字样
• 检查响应头
  • 如果响应头中没有允许跨域访问的配置，则请求到的数据不进行加载，并报出响应异常
  • 如果响应头中有允许跨域访问的设置，正常加载数据