给新手朋友解释前端解决跨域问题的方法

大家在初学的时候经常遇到下图这样的报错：

跨域错误.png

原来是因为浏览器有某些安全级别的限制，同源策略，所以在进行浏览器端的web应用开发的时候，经常会遇到跨域问题。

同源策略：

只有在同源的情况下（同域名，同协议，同端口）才能进行数据交互。

常用的跨域方式：

jsonp，cors，服务端代理。

jsonp

是一种前后端结合的跨域问题解决方式：

原理：
动态的创建script标签，将script标签的src属性设置成请求的目标地址，和后端商议之后，设置callback回调函数，利用回调函数来接收数据并进行使用。

为什么使用script：

依靠html中标签的src属性不受同源策略的影响来实现的,而script标签接收到数据之后可以进行数据的处理，所以一般选用script标签，

为什么要动态的创建script标签：

script只能执行一次或者说只能请求一次，所以说当我们要不断的进行jsonp请求的时候，每一次的请求都需要一个script标签，所以需要动态去创建script标签,script标签能将请求到的字符串数据当成js代码去运行，所以我们可以依靠后端返回一段（执行某个函数，且给此函数传入数据）的这样一段字符串来实现，这样的话，script请求到该字符串之后，就会执行该函数，且该函数能接收到数据。

为什么需要和后端商议之后才能设置callback函数：

因为后端开发者并不知道前端准备来接收数据的函数是哪个函数，所以需要让前端通知后端接收数据的函数名,前端需要将函数名传递给后端，但是传递的时候是以键值对的方式传递过去的，所以需要前端将键值对的键名事先告知后端

注意：
获取数据且操作完成后，一定要将创建的script标签去掉，将随机函数的内存给释放

缺点：
只能做get请求

    //封装jsonp
   function Jsonp(options) {
        //获取对象的url属性
        let url = options.url
        //判断有没有url
        if(!url){console.error('url不合法');return ;};
                let success = options.success || function(){}
                //创建新函数准备接收数据
                 var fname = 'jsonp'+Date.now()
                //挂载全局函数
                window[fname] = function(result){
                           //执行成功回调并传入回调函数
                            success(result)
                            //移除script标签
                            script.remove()
                            //移除全局函数
                            delete window[fname]
        }
         //动态创建script标签
        url+='?cb='+fname
        var script = $('<script>')      
        script.prop("src",url).appendTo($("body"))
    }

    Jsonp({
        url:'http://localhost:3000/text',
        success:function (results) {
            console.log(results)
        }        
    })

我希望用自问自答的形式能帮助大家更好的理解jsonp，其实官方没有给出前端跨域的解决方法，但是我们伟大的程序猿自己摸索出来的解决跨域的一种方法jsonp；是不是很厉害？