码迷,mamicode.com
首页 > 其他好文 > 详细

同源和跨域

时间:2018-03-23 19:22:54      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:for   content   使用   hub   dex   blog   ack   tostring   bsp   

理解什么是同源,跨域

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

什么是同源策略

  • 同协议、同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
}
})();

    

 

 

同源和跨域

标签:for   content   使用   hub   dex   blog   ack   tostring   bsp   

原文地址:https://www.cnblogs.com/kiscon/p/8633076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!