Ajax 跨域

      由于现在web前后端分离的原因,造成了前端开发中一定会遇到跨域的问题,在这里我总结下几种主流的跨域方式,iframe, window.name, window.domain 从来就没去用过,就不谈了。

    首先什么是跨域?

       跨域来源于同源策略。所谓同源策略是一种保障安全的策略,即 协议、主机名、端口,只要其中任一一种不同且在没有服务器明显授权的情况下那么就不能通过js去获取到数据。

      跨域的主要方式:

                 一  jsonp方式:

                          所谓的jsonp其实是利用网页中<script>可以随意引用不受同源策略的限制。他实际上返回的是一个函数,函数的参数即所需数据(即json with padding)。和普通的ajax有三点不同之处,1:只能用get方式, 2:需要改变dataType为jsonp, 3:需要约定好回调函数,三者缺一不可。这样服务器在响应的时候就把数据放在回调函数之类返回,而客户端接收到数据后就调用回调函数对数据进行相应的操作。

                缺点:只能用来获取数据。

        

                二 cors方式:

                            cross origin resourse sharing 跨域资源共享,他是W3C推荐的一种跨域的访问验证的机制,得到了现代主流浏览器均支持,浏览器把请求分为简单请求和复杂请求两类:

                                   简单请求:

                                             请求方法为:get     post     head    中的一种。

                                            头部信息中值是:application/x-www-form-urlencoded、multipart/form-data、text/plain中的一种。


    简单请求时,浏览器会直接发送跨域请求,并在请求头中携带Origin 的header,表明这是一个跨域的请求,服务器端接到请求后,会根据自己的跨域规则,通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头,来返回验证结果。如果验证成功,则会直接返回访问的资源内容。
                            
   如果服务器没有添加Access-Control-Allow-Origin响应头部,浏览器会拒绝,如下:
                              

                             复杂请求:

                                        常见的有:

                                                put,delete方法 或 发送json格式的ajax请求,自定义头部的ajax请求

复杂请求时,浏览器会想发送一条预检信息(这样比较影响效率,我们可以在服务器添加Access-Control-Allow-MaxAge来避免)

请求中带有cookie时还需要加上 "Accesse-Control-Allow-Credential",  "true" 才能进行跨域     


                          三 反向代理方式:

                                 可以自己搭建一个服务器,服务器获取请求后修改请求域名后再向目标服务器发送请求,获取数据后返回。因为是本域请求所以绕过了同源的限制。

         

          

        还可以通过在被调用方设置代理转发的方式~~~~~

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页