AJAX跨域问题的解决方案

跨域：

        是两个不在同一个服务器环境下的两个网页之间的相互之间的交互，浏览器默认阻止，这就要跨域。

 

 

 

 

如何解决跨域问题：

 

    解决跨域问题一共四个方法：

 

 

一、原生的JS解决方法------->针对get方法

 

        在script标签里的src属性里写入要跨域的服务器地址

 

        jsonp跨域访问原理：

                    本地利用src访问服务器，提交一个callback参数

                    服务器返回callback值加上一个括号方法调用，并传入参数

                    这样，就能实现调用本地的JS方法，同时获取服务器传入的参数

 

 

 

二、jQuery封装好的jsonp跨域------->针对get方法

 

            url--->跨域访问的服务器地址

        

        dataType----->必须是jsonp

 

        在success的回调方法里面接收返回的数据即可，服务器那边还是jsonp的数据格式写法

 

 

        （注意：）此种方法只针对get方式，就算是把type改成post，也是默认get方法。

 

 

    JQ的ajax的跨域属性：

            jsonpCallback：如果定义属性，则默认是callback=jQuery1111............(系统默认创建的一个函数名)

                                      jasonpCallback:"show",------->可以自定义函数名

 

            jsonp：用来修改callback这个部分的名字，某些服务器的jsonp跨域是根据callback获取的，但有些服务器的键不是叫callback,所以要利用这个属性把callback修改了。

        

        

 

 

 

 

 

三、cross添加响应头跨域------>针对get方式

        

        在服务器端：

                        //此响应头表示允许哪一个域名过来跨域

                        response.addHeader("Access-Control-Allow-Origin","*");//  * 表示允许所有客户端过来访问

                        

                        response.addHeader("Access-Control-Allow-Origin","http://localhost:63342");//表示只允许http://localhost:63342的域名访问

 

 

 

 

 

 

四、cross添加响应头跨域------>针对post方式

 

       如果post方式跨域添加了response.addHeader("Access-Control-Allow-Origin","*");还是不行的话，就要继续加

 

        完整的响应头：

        response.addHeader("Access-Control-Allow-Origin","*");

        response.addHeader("Access-Control-Allow-Method","post");

        response.addHeader("Access-Control-Max-Age","2000");