jsonp跨域&cros 跨域

跨域 ： 协议不同 端口不同 主机名称不同 会产生跨域
两者优缺点：
1：jsonp对浏览器的支持较好，cros只能支持ie10以上
2：jsonp只能获取资源，相当于get，而cros可以对服务端进项操作，支持所有类型的http请求，功能完善
3：jsonp错误处理机制不完善，而cros可以通过onerror事件监听错误，浏览器控制台会看到报错，利于排错
4：jsonp只会发送一次请求，而对于复杂的cros可以发送两次请求
5：jsonp没有cros安全

1：jsonp跨域 --src跨域
利用了使用src引用静态页面资源不受跨域限制的机制，主要是在客户端写一个回调函数，此回调函数主要是对数据进行接受和处理，并且将这个回调函数的名称告诉服务器端，服务器端要做的是按javascript语法，将数据放到对应的回调函数中
示例：比如一个页面，需要ajax获取不同域上的json数据，假设这个json数据地址是http://example.com/data.php，那么页面中的就可以这样写,即可获取到对应数据

function dosome(data){
console.log(data)
}

<script  src="http://example.com/data.php?callback=dosome"> </script>

2：cros 跨域（Cross-origin resource sharing）
全称跨域资源共享，它允许向跨源浏览器发行xmlHttpRquest请求，从而克制和ajax只能同源使用的限制 cros中最主要是其配置
第一种现象：
出现No ‘Access-Control-Allow-Origin’ header is present on the requested resource,
并且The response had HTTP status code 404
本次ajax请求是“非简单请求”，所以请求前会发送一次预检查请求（OPTIONS）
服务器端接口没有允许options请求，导致无法找到对应接口地址
解决方案：后端允许options请求
第二种现象：
No ‘Access-Control-Allow-Origin’ header is present on the requested resource,
并且The response had HTTP status code 405
这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),
阻止了OPTIONS请求,才会导致这个现象
解决方案: 后端关闭对应的安全配置
第三种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,
并且status 200
比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),
然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错
解决方案: 后端增加对应的头部支持
第四种现象:heade contains multiple values ‘,’
表现现象是，后台响应的http头部信息有两个Access-Control-Allow-Origin:*
解决方案:
建议删除代码中手动添加的*，只用项目配置中的即可
建议删除IIS下的配置*，只用项目配置中的即可
示例：

在php 文件里面配置 header('Access-Control-Allow-Origin: * ')
    var http = new XMLHttpRequest();
    http.open("post", "http://127.0.0.1:8080/0616/insert.php");
    http.send();
    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
            console.log(http.response);
        }
    }