JSONP跨域和CORS跨域

什么是跨域？

跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！

同源策略

同源策略：域名、协议、端口均相同。

浏览器执行JavaScript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行。

JSONP跨域

只支持GET请求，不支持POST等其它请求，也不支持复杂请求，只支持简单请求。

CORS跨域

支持所有的请求，包含GET、POST、OPTOIN、PUT、DELETE等。既支持复杂请求，也支持简单请求。

JSONP和CORS跨域理解

使用目的： JSONP与CORS的使用目的相同，并且都需要服务端和客户端同时支持，但CORS的功能更加强大。
JSONP（json with padding 填充式json）：利用了使用src引用静态资源时不受跨域限制的机制。主要在客户端搞一个回调做一些参数接收与操作的处理，并把这个回调函数告知服务器，而服务器端需要做的是按照JavaScript的语法把数据放到约定好的回调函数之中即可，jQuery很早之前就已经把JSONP语法糖化了，使用起来会更加方便。
CORS（Cross-origin resource sharing 跨域资源共享）：依附于AJAX，通过添加HTTP Header部分字段请求与获取有权限访问的资源。CORS对开发者是透明的，因为浏览器会自动根据请求的情况（简单和复杂）做出不同的处理。CORS的关键是服务器端的配置支持，由于CORS是W3C中一项较“新”的方案，以至于各大网页解析引擎还没有对齐进行严格规格的实现，所以不同引擎下可能会有一些不一致。

JSONP和CORS的优缺点

1. JSONP的主要优势在于对浏览器的支持较好；虽然目前主流浏览器都支持CORS，但IE9及以下不支持CORS。

2. JSONP只能用于获取资源（即只读，类似于GET请求）；CORS支持所有类型的HTTP请求，功能完善。（这点JSONP被玩虐，但大部分情况下GET已经能满足需求了）
   JSONP的错误处理机制并不完善，我们没办法进行错误处理；而CORS可以通过onerror事件监听错误，并且浏览器控制台会看到报错信息，利于排查。

3. JSONP只会发一次请求；而对于复杂请求，CORS会发两次请求。

4. 始终觉得安全性这个东西是相对的，没有绝对的安全，也做不到绝对的安全。毕竟JSONP并不是跨域规范，它存在很明显的安全问题：callback参数注入和资源访问授权设置。CORS好歹也算是个跨域规范，在资源访问授权方面进行了限制（Access-Control-Allow-Origin），而且标准浏览器都做了安全限制，比如拒绝手动设置origin字段，相对来说是安全了一点。但是回过头来看一下，就算是不安全的JSONP，我们依然可以在服务端端进行一些权限的限制，服务端和客户端也都依然可以做一些注入的安全处理，哪怕被攻克，它也只能读一些东西。就算是比较安全的CORS，同样可以在服务端设置出现漏洞或者不在浏览器的跨域限制环境下进行攻击，而且它不仅可以读，还可以写。

应用场景

如果需要兼容IE低版本浏览器，无疑，JSONP。
如果需要对服务端资源进行操作，无疑，CORS。
其他情况的话，根据自己的对需求的分析来决定和使用。

JSONP和CORS两种常见跨域方式的简单实现

方式一. JSONP实现过程

先看代码：客户端关键代码如下，需要注意的是负责跨域的那个script标签放在callback函数的下面。

<script type="text/javascript">
    function callbackFunction(data) {
        console.log(data)
    }
</script>
<!--放在下面哦  记住-->
<script src="https://39.108.135.222/jsonp/jsonp.phpcallback=callbackFunction"></script>

服务器代码如下

<!--php
header('Content-type: application/javascript');
$jsonCallback = htmlspecialchars($_REQUEST ['callback']);    //获取请求者自定义的回调函数名
$jsonData ='[{"name":"tomato","age":20},{"name":"eggplant","age":25}]';    //待返回的json数据
echo $jsonCallback . "(" . $jsonData . ")";    //输出jsonp格式的数据，即一行函数调用语句
-->

不难看出，JSONP其实利用的就是

这种跨域方式的优点：是原理简单，兼容性好，不需要对服务器端进行操作。

缺点：但是只能get 不能post 。

方式二. CORS实现过程

实例代码 客户端部分 （这是简单的ajax发送POST请求）

<script>
    document.querySelector('button').addEventListener('click',function() {
        var xhr = new XMLHttpRequest();//xhr.withCredentials = true;
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    console.log(JSON.parse(xhr.responseText))
                } else {
                    alert("Request was unsuccessful: " + xhr.status);
                }
            }
        };
        xhr.open("post", "https://39.108.135.222/jsonp/cors.php", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //xhr.setRequestHeader("Content-type", "multipart/form-data");
        xhr.send('name=tomato&age=18');
    })
        
</script>服务器端代码<p></p>
<p>
</p><pre class="brush:java;"><!--php
    header( "Access-Control-Allow-Origin:*" );
    $name = $_POST['name'];
    $age = $_POST['age'];
    echo json_encode($name.' is '.$age);
--></pre>
CORS跨域的方式最重要的是响应头的Access-Control-Allow-Origin，设置为*代表允许所有的域名请求。<br>
还有Access-Control-Allow-Credentials :(true or false) 默认是false 意思是服务器同意接受cookie（客户机也得设置为<p></p>
<p>xhr.withCredentials = true;而且Access-Control-Allow-Origin不能设置为*）</p>

本文并非原创，原文地址如下
原文1： https://www.cnblogs.com/yjxFive/p/JSONPCORS.html
原文2： https://www.2cto.com/kf/201803/732667.html