ajax跨域请求解决方案

Posted 2020-10-13

大家好,今天我们学习了js的跨域请求的解决方案，由于JS中存在同源策略，当请求不同协议名，不同端口号、不同主机名下面的文件时，将会违背同源策略，无法请求成功！需要进行跨域处理！

方案一、后台php进行设置，

前台无需任何设置，在后台被请求的PHP文件中，写入一条header

header("Access-Control-Allow-Origin:*");

表示允许那些域名请求这个PHP文件*表示所有域名都允许

这是最佳的解决方案，因为是在后台进行设置，不对外公开，所以更加安全，

方案二、使用src请求+JSONP实现跨域

* ①拥有src属性的标签自带跨域功能，所有可以使用script标签的src属性请求后台数据。

* <script src="http://127.0.0.1/json/php" type="text/javascript" charset="utf-8"> </ script>

* ②由于src在加载数据成功后，会直接将加载内容放入到script标签中，

* 所以后台直接返回JSON字符串将不能再script标签中解析。。

* 因此后台应该返回给前台一个回调函数名，并将json字符串作为参数调用

* 从后台PHP文件中国返回:echo "callBack({$json})";

③前台接收到返回的回调函数时，回调函数将直接在script标签中调用，因此需要声明这样一个回调函数，作为请求成功的回调。

eg：

$.ajax({
                method:"post",
                url:"http://127.0.0.1/json/php",
                dataType:"jsonp",
                success:function(data){
                    console.log(data);
                    console.log($str[1].name)
                }
            
            });

方案三、JQuery的AJax实现JSONP

①在ajax请求是，设置datatype为"jsonp"

②后台返回是，依然需要返回回调函数。但是，ajax在发送请求是惠默认使用get请求回调函数名发给后台，后台可以使用echo $_GET[‘callback‘]取出回调函数名，这样前台可以使用ajax的success函数作为成功的回调。

echo "{$_GET[‘callback‘]}({$str})";

③后台返回以后，Ajax依然可以使用success作为成功的回调函数；

success:function(data){}

当然后台也可以随便返回一个回调函数名，echo"callBack({$str})",

前台只要请求成功，就会自动调用这个函数。类似以第二条的②③步

<script src="http://127.0.0.1/json/php" type="text/javascript" charset="utf-8">