AJAX跨域之JSONP和CORS

时间:2022-12-18 10:57:07

JS跨域是指通过JS在不同的域之间进行数据传输或通信。

解决ajax跨域
一般ajax跨域解决就是通过JSONP解决或者CORS解决,如以下:

一.JSONP

1.JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法。

JSONP看起来与JSON差不多,只不过是被包含在函数调用中的JSON,如下:

callback({ "name":"Nicholas"});

2.区分JSON对象

 var book={
         name:name,
         age:age,
         sex:sex
    };
    var jsontext=JSON.stringify(book);//把一个JS对象序列化为一个JSON字符串
    var bookcopy=JSON.parse(jsontext);//得到相应的JS的值
    //注:book和bookcopy具有相同的属性,但它们是两个独立的,没有任何关系的对象

3.JSONP由两部分组成:回调函数和数据。

 <script>
        //jsonp跨域
        function show(data){
            console.log(data);
        }
    </script>
    <script src="http://localhost:80/6.9-6.10-web/php/data.php?callback=show"></script>

<?php
$callback=$_GET[callback];//得到路径传递的参数  也就是函数名称
$data=array("a","b","c");
echo $callback."(".json_encode($data).")";
?>
Array(3)
  1. 0:"a"
  2. 1:"b"
  3. 2:"c"

4.由上可知:JSONP跨域的原理就很清楚了

通过script标签引入一个JS文件,这个文件载入成功后会执行我们在URL参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以JSONP是需要服务器端的页面进行相应配合的。

二.CORS

1.CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

a.第一种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 404
出现这种情况的原因如下:
本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)
服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址
解决方案: 后端允许options请求
b.第二种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 405
这种现象和第一种有区别,这种情况下,后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象
解决方案: 后端关闭对应的安全配置
c.第三种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且status 200
比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错
解决方案: 后端增加对应的头部支持
d.第四种现象:heade contains multiple values '*,*'
表现现象是,后台响应的http头部信息有两个Access-Control-Allow-Origin:*
解决方案:
建议删除代码中手动添加的*,只用项目配置中的即可

建议删除IIS下的配置*,只用项目配置中的即可

2.CORS解决跨域

a.PHP后台配置

PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:

第一步:配置Php 后台允许跨域
<?php header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
//主要为跨域CORS配置的两大基本信息,Origin和headers

第二步:配置Apache web服务器跨域

<script>
    var xhr=new XMLHttpRequest();
    xhr.open("post","http://localhost:80/6.9-6.10-web/php/data.php");
    xhr.send();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            console.log( xhr.response);
        }

    }

</script>
<?php
header('Access-Control-Allow-Origin: *');
$callback=$_GET[callback];//得到路径传递的参数  也就是函数名称
$data=array("a","b","c");
echo $callback."(".json_encode($data).")";
?>
b.JAVA后台配置
JAVA后台配置只需要遵循如下步骤即可:
第一步:获取依赖jar包下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下)
第二步:如果项目用了Maven构建的,请添加如下依赖到pom.xml中:
<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>[ version ]</version>
</dependency>
c.NET后台配置
.NET后台配置可以参考如下步骤:
第一步:网站配置
打开控制面板,选择管理工具,选择iis;右键单击自己的网站,选择浏览;打开网站所在目录,用记事本打开web.config文件添加下述配置信息,重启网站
"Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept,Origin"