AJAX跨域之JSONP和CORS

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)

0:"a"
1:"b"
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"

AJAX跨域之JSONP和CORS

猜你喜欢