同源政策：如果两个页面拥有相同的协议、域名和端口则同源，如果其中有一个不一样就是不同源。
同源政策是为了保证用户信息安全，防止恶意的网站窃取数据，在同源政策下无法向非同源地址发送Ajax请求。

跨域： 为了解决同源限制问题，主要有JSONP和CORS两种方法

• JSONP (json with padding)：不属于Ajax请求，但可以模拟Ajax请求，将不同源的服务器端请求地址写在script标签的src属性中

1. 将非同源服务器端的请求地址写在script标签的src属性中

   <script src="http://localhost:3001/test"></script>

2. 服务器端响应数据必须是一个函数的调用，要发送给客户端的数据需要作为函数调用的参数

const data = 'fn({name: 'lisi', age: 20})'

3. 在客户端全局作用下定义函数fn

function fn (data) {
}

4. 在fn函数内部对服务器端返回的数据进行处理

function fn (data) {
	console.log('客户端的fn函数被调用了')
	console.log(data);
}

jsonp封装函数

function jsonp(options){
    //动态创建script标签
    var script = document.createElement('script') 
    //需要传递的参数拼接
    var params = ''
    for(var item in options.data){
        params += '&'+ item + '=' + options.data[item] 
    }
    //注册全局函数，使得调用jsonp时不用在外部定义函数；保证每次请求函数名的唯一性
    var fnName = 'Jsonp0fn' + Math.random().toString.replace('.','')
    window[fnName] = options.success
    //为script标签添加贷函数名的src属性
    script.src = options.url +'?callback=' + fnName + params
    // 将创建好的script标签添加到页面中
    document.body.appendChild(script)
    // 加载完成后删除该script标签
    script.onload = function(){
        document.body.removeChild(script)
    }

}

jsonp({
    data: {'name':'zhangsan','age':'19' },
    url: 'http://localhost:3001/better',
    success: function (res) {
        console.log('请求成功');
        console.log(res);
    }
})

CORS