AJAX跨域问题的解决方案

发布于:2021-12-07 18:43:46

跨域:


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


?



?


?


?


如何解决跨域问题:


?


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


?


?


一、原生的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");


?



?


?


?



?


?

相关推荐

最新更新

猜你喜欢