跨域的解决方案

为什么会出现跨域

出于浏览器的同源策略的限制。同源策略就是一种约定，它是浏览器最核心最安全的功能，如果没有它，浏览器的正常功能都会受到影响，也就是说web的构建在同源策略之上的，浏览器只是针对它的一种实现。

什么是跨域

就是当一个请求的协议、域名、端口三者之间有任何一个不同就是跨域

跨域的解决办法

JSONP

JSONP是指JSON Padding，JSONP是一种非官方跨域数据交换协议，由于script的src属性可以跨域请求，所以JSONP利用的就是浏览器的这个“漏洞”，需要通信时，动态的插入一个script标签。请求的地址一般带有一个callback参数，JSONP非常的简单易用，自动补全API利用的就是JSONP。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

1、原声写法

    <script>
        function addScript(src){
     
            var script = document.createElement("script")
            script.src = src;
            document.body.appendChild(script)
        }
        window.onload = function(){
     
            addScript("http://localhost:3000/jsonp?callback=abc")
        }
        function abc(data){
     
            console.log(data)`
        }

2、jquery写法

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
     // jquery中的ajax方法封装了jsonp  底层源码就是上面的代码
        $.ajax({
     
            type:"GET",
            url : "http://localhost:3000/jsonp",
            dataType : "jsonp",
            success : function(data){
     
                console.log(data)
            }
        })
        }

这里有人会误认为jsonp是一种请求方式，其实是错的，只是jquery底层源码中封装了jsonp原声写法而已。

3、vue写法

this.$http.jsonp('http://localhost:3000/jsonp', {
     
    params: {
     },
    jsonp: 'handleCallback'
}).then((res) => {
     
    console.log(res); 
})