同源和跨域

理解什么是同源，跨域

同源：域名、协议、端口完全相同。
跨域：域名、协议、端口有其中的一样不同。

什么是同源策略

• 同协议、同domain（或ip）、同端口，视为同一个域，一个域内的脚本仅仅具有本域内的权限。
• 理解：本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。　　

前端解决跨域访问的常用方式

　　1.jsonp

　　2.iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

　　3.代理：如vue-cli项目中的config/index.js文件中的proxyTable设置所要跨域访问的地址

应用场景

　　1.后台返会form表单，直接将其放在iframe里面进行提交，总是显示请求来源非法

　　解决：将form表单追加在页面上，并设置为display:none。另外直接使用document.formName.submit()，无法实现表单的提交。

　　　　需要添加setTimeout(function sub() { document.FormSubmit.submit() }, 0)　

　　分析：setTimeout(callback, 0),作用是改变了代码流，告诉js引擎，在0ms以后把callback放到主事件队列中，等待表单追加在页面上后再执行表单提交。

jsonp原理剖析

　　原理：动态创建出script标签，通过src属性访问跨域服务器，获取到jsonp格式数据。在jsonp获取之前需要有一个全局的函数用来接收jsonp的数据。

 　  封装函数：

var jsonpService = (function(){
    var getJsonp = function (url,data,cb) {
        var params='';
        for(var key in data){
            params += key + '=' + data[key] + "&";
        }
        var jsonpname = "jsonp_"+ Math.random().toString().substring(6);
        window[jsonpname] = function (data) {
            cb(data);
        };
        var script = document.createElement("script");
        script.src = url+'?'+params+'callback='+jsonpname;
        document.head.appendChild(script);
    }
    return {
        getJsonp: getJsonp
    }
})();

　　　　

 

转载于:https://www.cnblogs.com/kiscon/p/8633076.html