跨域问题，及解决方案

1.同源策略

    同源策略即，请求URL地址中的协议，域名，端口都相同，同源策略是浏览器的一种安全策略，主要是为了保证浏览器的安全性，同源策略下，浏览器不允许Ajax跨域获取服务器数据

 

2.什么是跨域问题呢？

  协议(http,https),域名(api，www....),端口(8080，5000，3000，80)三者之一不同就会造成跨域问题，

 

3.跨域是会报什么样的错呢？

 

4.如何解决跨域问题？

常用 的解决方案是jsonp，jsonp只能实现get的跨域，实现post的跨域需要服务器端开放相应的权限

 

所有的静态标签是不存在任何跨域问题的，所以，jsonp就可以借助src来解决跨域问题

 

5.jsonp封装

 

<script>
    jsonp({
      url: 'http://localhost:3000',
      data: ' ',
      success: function(data){
        console.log(data);
      }
    });

    function jsonp(options){
        //将用户通过命名空间定义的函数挂载到全局
        window.getData = options.success;
        //处理字符串拼接
        options.url = options.url + '?callback=getData';
       
        //创建一个script标签
        let script = document.createElement('script');
        script.src = options.url;
        document.body.appendChild(script);
     }
</script>

 

 

 

注：如果有多个跨域，服务器和客户端要对多个方法，很麻烦！