跨域问题的原理分析

一、什么是跨域

        当页面来源url(的协议，域名，端口)跟页面发出请求获取后端数据的url(的协议，域名，端口)，只有要一个不同时，即为跨域。举个例子: 我当前先请求blog.csdn.net/nav/lang到csdn服务器获取到一个csdn的页面，那么csdn页面来源的urlblog.csdn.net/nav/lang，然后我再到该页面去访问后端接口，url为localhost:8074/o/popularize/162，就会出现跨域问题了。

二、原因分析

      

        点开请求分析下几个参数：

        Host: 是请求的服务地址

        Origin: 是当前页面来源的地址

     

          

        对于非跨域的请求，是没有Origin这个参数，所以这个参数在跨域问题中相当重要

        

         

        下面我对后端的解决进行跨域处理，具体怎么处理这里就不赘述了，一搜一大堆，但是基本搜不到一篇原因剖析的，下面我还是在blog.csdn.net/nav/lang所在的页面去访问我本地的一个接口，这个接口已经处理了跨域问题。

        次时已经不会出现跨域问题

       

        分析下具体参数，次时我们发现响应请求头多了这个Access-Control-Allow-Origin参数，那么浏览器就会先拿着Access-Control-Allow-Origin的值跟请求头Origin的值进行一个对比，如果一致就接收返回的数据，如果不一致或者压根就没这个参数就会报跨域问题的错误（即第一张图所示）

 ​​