跨域常用的CORP和JSONP到底是什么？

一.什么是同源？

所谓同源是指，域名，协议，端口均相同。

二.什么是跨域？

跨域：跨域问题的出现主要是因为浏览器的同源策略，即浏览器必须保证只有 协议+端口+域名 一模一样才允许发 AJAX 请求。为了突破同源策略，所以需要跨域

三.CORS(跨域资源共享)

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

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

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

四.什么是JSONP?

什么是JSONP：JSONP就可以解决跨域问题。JSONP是网页通过动态创建 "<script>"元素向服务器发起请求，
当服务器接收到请求后，将数据放在一个指定名字的回调函数里传回来。而正因此<script>只能GET不能
POST，JSONP也只能GET不能POST。

封装jsonp，代码如下：

//封装JSONP
function jsonp(url){
    return new Promise((resolve,reject)=>{
        const random = 'liuleiJSONPCallbackName' + Math.random()
        window[random] = (data)=>{
            resolve(data)//成功
        }
        const script = document.createElement('script')
        script.src = `${url}?functionName=${random}`
        script.onload = () =>{
            script.remove()
        }
        script.onerror =　() => {
            reject()//失败
        }
        document.body.appendChild(script)
    })
}

jsonp('http://qq.com:7777/friends.js') .then((data)=>{ console.log(data) })

面试常问的JSONP相关知识点：

1.什么是jsonp？
答：
    背景：在跨域的时候，当前浏览器不支持CORS进行跨域，我们必须使用另一种方式进行跨域，就使用jsonp，
    于是我们就请求一个js文件，js文件执行一个回调，回调里面就有我们需要的数据
    而回调的名字是可以随机生成的，是随机数，把这个名字以callback的参数传给后台，后台会把这个函数返回给前端并执行，结合上面的代码

2.jsonp优点：
    （1）跨域，
    （2）兼容IE，

3.jsonp缺点：
    （1）由于是script标签，读不到ajax那么精确的状态，拿不到状态码，拿不到header
    （2）由于是script标签，只能发get请求，
    （3）jsonp不支持post，script不支持post

4.CORS 和JSONP的比较：
(1) CORS与JSONP的使用目的相同，但是比JSONP更强大。
(2) JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。