关于JS跨域

作者: 李博洋li | 来源:发表于2017-06-20 11:47 被阅读0次

vue 跨域的配置
关于JS跨域
关于JS跨域
跨域
跨域问题详解分析
2021-02-23
HTML-获取iframe元素的正确方法
JSONP、CORS、跨域
怎么能学好Web前端开发，如何去解决JS跨域问题
如何去解决JS跨域问题怎么能学好Web前端开发

我所理解的JS跨域指的是：浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。也就是说可以理解成违反了同源策略的三种情况，我们就可以理解成跨域。

JS同源策略指的是以下三个：

域名相同，如：jrg.com和jirengu.com的域名不同，那么这两个就不是同源的
端口相同，如：jrg.com:8080和jrg.com:8088就是不同端口的
协议相同，如都是http协议或都是https协议或都是file协议

既然存在跨域这种情况，那么肯定存在解决方法，一般能用到的几种解决跨域的方法：

JSONP
CORS(添加响应头的方式)
针对iframe的情况可以使用降域。
postMessage

下面简单说一下这几种不同的方法：

JSONP

JSONP是利用script标签的特性来解决跨域问题的，script标签可以引入其他域的内容，不会被浏览器阻止，所以我们可以利用这个特性，给script标签的src属性赋值成其他域提供的接口（一般格式大概是src="http://www.a.bbs.com/?news=beijing?callback=show"），然后利用一个函数（就例子来说这个函数就是callback后面的show）来处理我们拿到的其他域的数据，使其展示在页面上。这种办法和AJAX完全没有关系，同样的，也不会受到跨域的影响。举个例子：

//页面代码
btn.addEventListener("click",function (){
    var script = document.createElement("script");
    script.src = "http://localhost:8080/getNews?callback=show"
    document.head.appendChild(script);
    //document.head.removeChild(script);
})

function show(news){                //news是个参数，这个参数是个引用类型，可能是数组，也可能是JSON
    var content = '';
    for(var i = 0; i<news.length; i++){
        content+='<li>' + news[i] + '</li>';
    }
    ct.innerHTML = content;
}

//服务端代码
app.get("/getNews",function(req,res){
  var news = [
    "总结了日式网站这4个优点后，我能把中文网站做得高大上了！",
    "写给沉迷于学习新软件的设计师：技多真的不压身吗？",
    "IOS 10 VS 11：一份全面深入的UI对比分析报告",
    "在配色这件事情上，总会有一些有趣且有用的小技巧",
    "那些让人一见钟情的网页首屏，遵循着怎样的设计模式？",
    "漫山遍野的多边形元素，正在入侵每一份设计稿",
    "配色高手系列！聊聊“黑色”在电商设计里的常用搭配技巧！",
    "设计反复修改？可能是你的信息层级没有梳理好！"
    "如何制造信赖感和惊喜感？我总结了这些设计方法"
  ];
  var data = [];
  for(var i = 0; i<3; i++){
    var index = parseInt(Math.random()*news.length);    //获取随机数来实现随机获取新闻中的某一条
    data.push(news[index]);     //建立新数组用来保存新闻
    news.splice(index,1);     //去重复
  }
  
  var callback = req.query.callback;    //如果请求参数含有callback
  if(callback){
    res.send(callback+'(' + JSON.stringify(data) + ')');    //show("xxxx","xxxx")
  }else{
    res.send(data);
  }
})

CORS

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。它的原理是针对响应头加入一段代码使浏览器能辨识我们的跨域请求并执行，这里就得啰嗦一下浏览器的一个特性，我们向不同域的接口去请求数据的时候，我们请求的服务器是一定会给你相应的数据的，但是当数据来到之后，浏览器会辨识你的数据是否是跨域的请求，如果是跨域的请求，浏览器会阻止你的行为，所以说，跨域其实是浏览器的一种特性。

实现方式：当使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该响应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。不多说了，先上代码吧~

//页面JS
var btn =document.querySelector("button");
    var ct =document.querySelector('#ct');
    var pageIndex = 0;

    btn.addEventListener("click",function(){
        var xhr = new XMLHttpRequest();
        xhr.open("get","http://a.jrg.com:8080/getNews",true);
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status ===200 || xhr.status === 304){
                show(JSON.parse(xhr.responseText));
            }
        }
    })
    function show(news){
        var content = "";
        for(var i = 0; i<news.length; i++){
            content += '<li>' + news[i] + '</li>';
        }
        ct.innerHTML = content;
}


//服务端代码
app.get("/getNews",function(req,res){
  var news = [
    "用1年时间让DRIBBBLE 涨粉过万，我是怎么做到的？",
    "没灵感？这里是最全的12个LOGO设计风格总结！",
    "IOS 10 VS 11：一份全面深入的UI对比分析报告",
    "在配色这件事情上，总会有一些有趣且有用的小技巧",
    "那些让人一见钟情的网页首屏，遵循着怎样的设计模式？",
    "漫山遍野的多边形元素，正在入侵每一份设计稿",
    "配色高手系列！聊聊“黑色”在电商设计里的常用搭配技巧！",
    "设计反复修改？可能是你的信息层级没有梳理好！",
    "如何做落地页设计？这儿有20个顶尖的案例和优点分析",
    "不懂服务设计？看看它的演变历史你就知道了！",
    "深度好文！如何积极正确地使用「预设计」方法？",
    "省时高效！苹果官方的设计流程和实用工具推荐"
  ];
  var data = [];
  for(var i = 0; i<7; i++){
    var index = parseInt(Math.random()*news.length);    //获取随机数来实现随机获取新闻中的某一条
    data.push(news[index]);     //建立新数组用来保存新闻
    news.splice(index,1);     //去重复
  }
  //res.header("Access-Control-Allow-Origin","*")       //CORS的核心思想
  res.header("Access-Control-Allow-Origin","http://a.jrg.com:8080")       //CORS的核心思想
  res.send(data);
})

降域

降域一般是针对页面内嵌得iframe来进行处理的方法，降域的核心思想是将一个一级域名下的几个子域名来降域到同一个域名以实现处理iframe和引入它的页面之间的跨域问题，主要的核心代码是：document.domain = ""。降域的一般方法如下：

降域1.png

降域2.png

postMessage

postMessage也是一种处理iframe跨域的方法，比使用document.domain会更加方便一些，我们可以理解成主页面向iframe发送一些信息，如果iframe需要就可以监听这些消息，如果不需要就可以不监听这些消息，同样的iframe也可以像父页面发送消息，主页面也是可以监听到这些消息的，如果不需要，就不监听这些消息。
代码如下：