zoukankan      html  css  js  c++  java
  • 同源和跨域

    理解什么是同源,跨域

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

    什么是同源策略

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

        

     
  • 相关阅读:
    windows中dos命令指南
    HDU 2084 数塔 (dp)
    HDU 1176 免费馅饼 (dp)
    HDU 1004 Let the Balloon Rise (map)
    变态杀人狂 (数学)
    HDU 2717 Catch That Cow (深搜)
    HDU 1234 开门人和关门人 (模拟)
    HDU 1070 Milk (模拟)
    HDU 1175 连连看 (深搜+剪枝)
    HDU 1159 Common Subsequence (dp)
  • 原文地址:https://www.cnblogs.com/kiscon/p/8633076.html
Copyright © 2011-2022 走看看